Как я могу плавать текст вокруг изображения в Flutter?

Question

Как мне добиться этого макета во Флаттере?

Answer 1

Я опубликовал пакет drop_cap_text для достижения DropCapText, вы также можете поместить изображение в качестве пользовательского виджета внутри DropCap.

Answer 2

Вы можете использовать Stack (): https://flutter.io/docs/development/ui/layout#stack

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    var stack = Stack(
      alignment: const Alignment(0.6, 0.6),
      children: [
        CircleAvatar(
          backgroundImage: AssetImage('images/pic.jpg'),
          radius: 100.0,
        ),
        Container(
          decoration: BoxDecoration(
            color: Colors.black45,
          ),
          child: Text(
            'Mia B',
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
        ),
      ],
    );
    // ...
  }
}

Вы можете использовать виджет Container () с foregroundDecoration:

Container(
  child: Text('Hello World'),
  foregroundDecoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage('https://www.example.com/images/frame.png'),
      centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
    ),
  ),

Answer 3

Как указано @ jay7n , это можно реализовать, пока команда флаттера все еще работает над реализацией.

Идея проста: определить ширину изображения и общий текст размер (умножьте количество текста на один размер шрифта) и проверьте, есть ли недостаточно места для всего текста, затем разделите его на два текста виджеты, один за изображениями, другой - до следующей строки. Все виджеты заключены в виджет Wrap. Я не уверен, что это правильный способ сделать это, но я думаю, что обходной путь работоспособен

Answer 4

Довольно простая, просто простая строка с данными внутри нее

 Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
      Image.asset('Your image link here'),
      Text('you paragraph here')
    ],)