Flutter how to change background and text for a specific section of an image?

user_7157713 0
Viewed 1901

I am creating an App in flutter and needed some ideas on how to go about doing this,

I am adding pdf - png images to my app which has Arabic text and need a way to change the text of an image. If an image has so much text I want to go to a certain line in a text and swipe to the right and change background and text. What widget should I use? Or how should I go about doing this? swipe to the right I want it to highlight English text with a nice background and swipe to the left back to Arabic. I am using the flutter framework and am stuck on how to go about doing this?

and how to do it code-wise... will I need to add dimensions per each line?

import 'dart:io';

import 'package:Quran_highlighter/main.dart';
import 'package:system_shortcuts/system_shortcuts.dart';
import 'package:Quran_highlighter/Widgets/NavDrawer.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:zoom_widget/zoom_widget.dart';
import 'package:flutter/gestures.dart';

//  onPanEnd: (details) {
//       if (swipeLeft) {
//         handleSwipeLeft();
//       } else
//         handleSwipeRight();
//     },
//     onPanUpdate: (details) {
//       if (details.delta.dx > 0) {
//         swipeLeft = false;
//       } else {
//         //print("Dragging in -X direction");
//         swipeLeft = true;
//       }
//     },
Future main() async {
  await SystemChrome.setPreferredOrientations(
      [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);
  runApp(new Aliflaammeem());
}

class Aliflaammeem extends StatefulWidget {
  @override
  _AliflaammeemState createState() => _AliflaammeemState();
}

class _AliflaammeemState extends State<Aliflaammeem> {
  // Widget body(BuildContext context) {
  //   if(MediaQuery.of(context).orientation == Orientation.portrait)
  //   {
  //     return portrait();
  //   }
  //   else {
  //     return landscape();
  //   }
  // }
// landscapeLeft
// landscapeRight
// portraitDown
// portraitUp
  double value;

  @override
  void initState() {
    value = 0.0;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // appBar: AppBar(
    //   title: Text('Para 1, Pg2'),
    //   backgroundColor: Colors.teal[400],

    SystemChrome.setPreferredOrientations(
        [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);
    return Scaffold(
        body: GestureDetector(onPanUpdate: (DragUpdateDetails details) {
      if (details.delta.dx > 0) {
        print("right swipe english");
        setState(() {
          //  highlightColor: Colors.green,
          // textColor: Colors.white,
          new Text(
            "In The Name of Allah, the Benificient, The Mericiful",
            style: new TextStyle(fontSize: 12.0),
          );
//               // fontWeight: FontWeight.w200,
          // fontFamily: "Roboto"),
          // value = 2.1;
        });
      } else if (details.delta.dx < 0) {
        print("left swipe arabic");
        setState(() {
          //  highlightColor: Colors.green,
          // textColor: Colors.white,
          new Text(
            "In The Name of Allah,The Mericiful",
            style: new TextStyle(fontSize: 12.0),
          );
          // value= 0.1;
        });
        new Container(
            child: LayoutBuilder(
                builder: (context, constraints) => SingleChildScrollView(
                    child: SingleChildScrollView(
                        scrollDirection: Axis.vertical,
                        // scrollDirection: Axis.horizontal,
                        // child: Zoom(
                        //   height:1800,
                        //   width: 1800,
                        child: SafeArea(
                            top: true,
                            bottom: true,
                            right: true,
                            left: true,
                            child: Image(
                                image: AssetImage('test/assets/quranpg0.png'),
                                fit: BoxFit.cover))))));
      }
    }));
  }
}

enter image description here

flutter-layout flutter visual-studio android
1 Answers

To detect swipe to right and left , you can use GestureDetector .

Declare a boolean to know whether its a left or right swipe.

bool swipeLeft=false;

and inside your scaffold or wherever you are writing this code, wrap GestureDetector around your child widget.

child: GestureDetector(

        onPanEnd: (details) {
          if (swipeLeft) {
            handleSwipeLeft();
          } else
            handleSwipeRight();
        },
        onPanUpdate: (details) {
          if (details.delta.dx > 0) {
            swipeLeft = false;
          } else {
            //print("Dragging in -X direction");
            swipeLeft = true;
          }
        },
        child: Container(
              child: PDFPngImage(),
        )
  ),

Whenever user starts swiping on screen, onPanUpdate is called with details of user interaction. From the details, you can extract whether its right swipe or left swipe

 onPanUpdate: (details) {
          if (details.delta.dx > 0) {
            //it means , user is swiping towards right
            //hence set bool variable to false.
            swipeLeft = false;
          } 
        }

And when swiping ends completely, onPanEnd is called , hence check the status of bool variable, whether it was a swipe left or right and update UI accordingly.

Hope this is clear and helpful!!

@Edit: Similar Complete Code related to what you want to implement in particular. Try following a similar approach and implement it. I hope this is clear!

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class TestPage extends StatefulWidget {

  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  var myText = "";
  var image;
  var pageIndex = 0;
  var numberOfOnBoardScreens = 3;
  var swipeLeft = false;

  var data = [
    [
      'assets/images/urdu.png',
      'Text in urdu',
    ],
    [
      'assets/images/English.png',
      'English translation',
    ],
    [
      'assets/images/french.png',
      'Translation in french',
    ]
  ];
  handleClick(direction) {
    print('handle click :$direction');
    if (direction == -1) //moving left
    {
      if (pageIndex > 0) {
        setState(() {
          pageIndex -= 1;
        });
      }
    } else if (numberOfOnBoardScreens - 1 > pageIndex) {
      setState(() {
        pageIndex += 1;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: GestureDetector(
          //onHorizontalDragEnd: handleClick(1),
          onPanEnd: (details) {
            if (swipeLeft) {
              handleClick(1);
            } else
              handleClick(-1);
          },
          onPanUpdate: (details) {
            if (details.delta.dx > 0) {
              swipeLeft = false;
            } else {
              //print("Dragging in -X direction");
              swipeLeft = true;
            }
          },
          child: TestPageScreenWidgetState(
            image: data[pageIndex][0],
            myText: data[pageIndex][1],
          )),
    );
  }
}

class TestPageScreenWidgetState extends StatelessWidget {
  final myText;
  var image;
  var currentScreen = 1;

  TestPageScreenWidgetState({
    this.image,
    this.myText,
  });

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        SizedBox(
          height: MediaQuery.of(context).viewPadding.top,
        ),
        Image.asset(
          image,
        ),
        Center(
          child: Padding(
            padding: const EdgeInsets.fromLTRB(100, 10, 90, 60),
            child: Center(
              child: Text(
                '$myText',
              ),
            ),
          ),
        ),
      ],
    );
  }
}
user_122577580
Related