Как реализовать фон с наложенным текстом во флаттере - PullRequest
0 голосов
/ 14 июля 2020

На Facebook есть функция, при которой можно написать сообщение, выбрав цвет фона или изображение, а не написать на нем текст. Как я могу воспроизвести это с помощью флаттера, чтобы фон сохранялся вместе с текстом на нем? Вот ссылка на изображение того, что я пытаюсь создать.

Ответы [ 2 ]

0 голосов
/ 14 июля 2020

Используйте стек, затем фоновое изображение и текстовое поле.

 @override
Widget build(BuildContext context) {
 return new Scaffold(
  body: new Stack(
   children: <Widget>[
    new Container(
      decoration: new BoxDecoration(
        image: new DecorationImage(image: new AssetImage("images/background.jpg"), fit: BoxFit.cover,),
      ),
    ),
    new Center(
      child: new TextField(
              decoration: InputDecoration(
              hintText: "What's on your mind",
              hintStyle: TextStyle(color: Colors.black)),
              style: TextStyle(color: Colors.white),
             ),)
           ],
          )
         );
        }
0 голосов
/ 14 июля 2020

Дайте несколько идей:

  1. Сложите изображение и текстовое поле (текстовое поле без рамки и прозрачного фона
  2. Оберните эту стопку скриншотом для печати окончательного изображения
...