如何添加可拖动的“文本字段”以在抖动图像上添加文本?

时间:2019-09-17 10:01:14

标签: flutter dart textfield photo

我正在flutter中创建一个Meme生成器应用程序。我只需要知道用户自己是否可以在图像上添加文本并将该文本拖到图像区域中的任何位置即可...这样图片就看起来很有趣。我尝试过Dragbox小部件,但不知道如何将其用于文本字段。因此我也可以将文本移动到图像上的任何位置。I need something like this

1 个答案:

答案 0 :(得分:0)

    class TextOverImage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        Size size = MediaQuery.of(context).size;
        return Scaffold(
        appBar: AppBar(
            centerTitle: true,
            title: Text('Text Over Image Image Example'),
        ),
        body: Center(
            child: Container(
            height: 300,
            width: 300,
            child: Stack(
                children: <Widget>[
                Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5),
                        color: Colors.blue,
                        image: DecorationImage(
                            image: new NetworkImage(
                                "https://thumbs.dreamstime.com/b/funny-face-baby-27701492.jpg"),
                            fit: BoxFit.fill)),
                ),
                HomePage()
                ],
            ),
            ),
        ),
        );
    }
    }

    class HomePage extends StatefulWidget {
    @override
    _HomePageState createState() => _HomePageState();
    }

    class _HomePageState extends State<HomePage> {
    Offset offset = Offset.zero;

    @override
    Widget build(BuildContext context) {
        return Container(
        child: Positioned(
            left: offset.dx,
            top: offset.dy,
            child: GestureDetector(
                onPanUpdate: (details) {
                setState(() {
                    offset = Offset(
                        offset.dx + details.delta.dx, offset.dy + details.delta.dy);
                });
                },
                child: SizedBox(
                width: 300,
                height: 300,
                child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Center(
                    child: Text("You Think You Are Funny But You Are Not",
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 28.0,
                            color: Colors.red)),
                    ),
                ),
                )),
        ),
        );
    }
    }

enter image description here