Добавление текста, изображений или списка просмотра на эшафот в Flutter

Question

Мне нужно добавить изображение и текст ниже в параграфах на скаффолде вместе со списком или чем-то вроде таблицы в HTML.

Я прошел пример добавления текста, но он не содержит никаких отступов, и это от края до края, также я не уверен, как вставить разрыв в текст.

У меня есть несколько классов с похожей структурой, как это вызывается из панели навигации.

Вот пример класса по умолчанию:

//Contact Info
class Fourth extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Contact Info"),
      ),
      body: Center( 
      ),
    );
  }
} 

Вот что я пытался сделать с текстом, мне нужно было добавить картинку, а затем пару абзацев текста.

class ThirdScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Supreme Council"),
      ),
      body: Center(
        child: new RichText(
          text: new TextSpan(
            //text: 'Hello ',
            //style: DefaultTextStyle.of(context).style,
            children: <TextSpan>[
              new TextSpan(
                text: 'Lorem ipsum dolor sit amet',
                style: new TextStyle(color: Colors.black),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

Есть несколько способов показать такой список. Вы можете обернуть столбец в SingleChildScrollView, который позволит вам прокручивать. Затем просто добавьте несколько отступов. Также обратите внимание на Flutter Docs и его каталог виджетов:

new SingleChildScrollView(
    child: Column (
        Padding( // some padding
            padding: EdgeInsets.only(top: 20.0, right: 30.0, left: 30.0, bottom: 50.0),
            child: Image.asset(...), // add the image source
        ),
        Padding( // some padding
            padding: EdgeInsets.only(top: 20.0, right: 30.0, left: 30.0, bottom: 50.0),
            child: Text("Lorem ipsum dolor sit amet", style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold)), // header
        ),
        Padding( // some padding
            padding: EdgeInsets.only(top: 10.0, right: 50.0, left: 50.0),
            child: Text("Some more text"), // add text
        ),
    )
)

В зависимости от того, что именно вам нужно, вы также можете использовать плагин flutter_html_view, который поддерживает некоторые основные HTML-теги:

import 'package:flutter_html_textview/flutter_html_textview.dart';

String html = '<img src="example.com/yourimage.png"></img><h1>Hello world!</h1><p>Some more text</p>';
new HtmlTextView(data: html);

Answer 2

Нажмите на свой RichText, нажмите Alt+Enter и затем выберите, чтобы добавить Padding. У вас будет много вариантов, вы можете увидеть их на странице класса EdgeInsets:

https://docs.flutter.io/flutter/painting/EdgeInsets-class.html

Вы можете добавить разрывы строк в своем тексте, используя \n, например: "Этот текст добавит разрыв строки \n здесь".

Нет, вам не нужно добавлять пробелы по обе стороны от \n. Вышеуказанные результаты в:

Этот текст добавит разрыв строки здесь.