Flutter 0试图在阿拉伯文本上添加按钮，并且在滑动Android应用程序中将其更改为英文文本

Question

我正在快速创建一个应用，并且需要一些有关如何执行此操作的想法，

我正在将pdf-png图像添加到我的具有阿拉伯文本的应用程序中，并且需要一种为每个文本添加按钮或标签并向右滑动的方法，我希望它以漂亮的背景突出显示为英文文本并向左滑动回到阿拉伯语。我正在使用flutter框架，并坚持执行该操作，添加了图像，添加了按钮，但是对于876页，这可能需要一段时间...任何想法将不胜感激？

以及如何在代码上做到明智...我需要在每行添加尺寸吗？enter code here

    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)
    )
          )
            )
          )
);
}
               }
            )
    );
  }
}

Answer 1

要检测左右滑动，可以使用GestureDetector。