How can I create a details box with text and dividers in flutter

Question

I wanna achieve this:

I'm new on Flutter and I'm trying do design some UI to learn; reading the documentation I was thinking of achieving this by using Column and Dividers but I don't know how to change the style of the column with rounded borders, background color and things like that + I don't know which widget should I use for the text. Can anyone help me please and maybe show me some examples?!

Solution

Instead of a Column widget, you can achieve the UI design by using the Card, ListView, and ListTile widgets.

• Card - Provide the rounded border for its child.
• ListView - Load the widgets as scrollable based on scroll direction.
• ListTile - A build-in child widget for the ListView.

Find the code snippet below.

    return Card(
      margin: EdgeInsets.all(5.0),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
      color: Colors.grey.withOpacity(0.25),
      child: ListView(
        scrollDirection: Axis.vertical,
        children: [
          ListTile(
            title: Text('Title'),
            subtitle: Text('Subtitle'),
          ),
          Divider(),
          ListTile(
            title: Text('Title'),
            subtitle: Text('Subtitle'),
          ),
          Divider(),
          ListTile(
            title: Text('Title'),
            subtitle: Text('Subtitle'),
          ),
          Divider(),
          ListTile(
            title: Text('Title'),
            subtitle: Text('Subtitle'),
          ),
          Divider(),
          ListTile(
            title: Text('Title'),
            subtitle: Text('Subtitle'),
          ),
          Divider(),
          ListTile(
            title: Text('Title'),
            subtitle: Text('Subtitle'),
          ),
          Divider(),
          ListTile(
            title: Text('Title'),
            subtitle: Text('Subtitle'),
          ),
        ],
      ),
    );

Comments

[NoProg]

Thanks almost what I needed, i tried it out but I get the error "RenderBox was not laid out". I made a small research and tried to add shrinkWrap: true in the ListView. It works but list is not scrollabale anymore. Suggestions?

[Ashok Kuvaraja]

I just added the ListTile widgets for fill with in the screen height. If you want to make it scrollable, you can add more ListTile widgets to inside the ListView.children property..