I need to add an image and text below in paragraphs in a scaffold, along with a listview or something like a table in HTML.

I went through the example of adding the text, but it doesn't contain any padding and it is edge to edge, also I'm not sure how to inserts break to the text.

I have multiple classes with similar structure as it is being called from a navigation bar.

Here is an example of the default class:

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

Here is what I was trying to do with the text, I needed to add a picture followed by a couple of paragraphs of text.

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


Solution 1: Bostrot

There are a number of ways to show such a list. You could wrap a Column in a SingleChildScrollView which would let you scroll. Then just add some Paddings. Also keep a look at the Flutter Docs and it's Widget Catalog:

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
        ),
    )
)

Depending on what exactly you need you could also use the flutter_html_view plugin which supports some basic html tags:

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


Solution 2: scottstoll2017

Click on your RichText, hit Alt+Enter and then select to add Padding. You'll have lots of options, you can see them at the EdgeInsets class page:

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

You can add line breaks in your text by using \n as in: "This text will add a line break\nhere."

No, you don't need to add spaces on either side of the \n. The above results in:

This text will add a line break here.