Fill ListView tiles vertically by a container - Flutter

Question

I have been trying to put a line indicator on the left most margin of the card in my flutter app. I've tried a lot of things but didn't work.

There's an exact question here, which is actually the same issue I've been trying to solve.

The problem with the accepted solution is that it restricts the height of the hardcoded value, which I don't want. Rather the color should automatically fill the height of the card.

The Problem

I've tried all the three solutions and none of them fit my use case.

Output from first solution Here I've to hardcode the value to something larger so that all the text being displayed lies well inside it. That's something I feel is not a solution.

Card(
            key: ObjectKey(noteList[index]),
            elevation: 2.0,
            child: IntrinsicHeight(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Container(
                    width: 4,
                    color: Color(noteList[index].intcolor),
                  ),
                  Flexible(
                    flex: 100,
                    child: ListTile(
~~~~~~~~~~~~~~~~~ SNIP ~~~~~~~~~~~~~~~~~~~~~~~~

chip goes outside

Output from Second solution This doesn't show anything at all.

Card(
            key: ObjectKey(noteList[index]),
            elevation: 2.0,
            child: Row(
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: Container(
                    constraints: BoxConstraints.expand(),
                    color: Color(noteList[index].intcolor),
                  ),
                ),
                Flexible(
                  flex: 100,
                  child: ListTile(
~~~~~~~~~~~~~~~~~ SNIP ~~~~~~~~~~~~~~~~~~~~~~~~

No output at all

Output from last solution There's no color from the container. There's no color from the container

Thanks a lot.

Update 1 ( Monday, 6 April 2020 8:16 pm GMT )

Added code and repo for easy replication.

Repo

main.dart

import 'package:flutter/material.dart';

void main() {
  List<String> notes = [
    "fluttermaster.com",
    "Update Android Studio to 3.3",
    "Something long Something long Something long Something long Something long Something long",
  ];

  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text("Simple Note ListView"),
      ),
      body: Container(
          color: Colors.white10,
          padding: EdgeInsets.all(16.0),
          child: HomePage(notes)),
    ),
  ));
}

class HomePage extends StatelessWidget {
  final List<String> notes;

  HomePage(this.notes);
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: notes.length,
      itemBuilder: (context, pos) {
        return Padding(
            padding: EdgeInsets.only(bottom: 16.0),
            child: Card(
              elevation: 2.0,
              child: Row(
                // key: _cardKey,
                children: <Widget>[
                  Flexible(
                    flex: 1,
                    child: Container(
                      // -------------------- This here ----------------------------------------------
                      // FixMe : This shouldn't be hardcoded, rather it should fill the height of it's parent element, in this case card
                      // https://medium.com/@diegoveloper/flutter-widget-size-and-position-b0a9ffed9407
                      height: 71,
                      color: Colors.green,
                      // -------------------- This here ----------------------------------------------
                    ),
                  ),
                  Flexible(
                    flex: 100,
                    child: ListTile(
                      // For center alignment from vertical and horizontal : https://stackoverflow.com/a/51546279
                      // Since using CircleAvatar does this but it decreases size of icon too : https://github.com/flutter/flutter/issues/16061
                      leading: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Icon(Icons.receipt),
                        ],
                      ),
                      title: Text(
                        notes[pos],
                      ),
                      subtitle: Row(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text(notes[pos].substring(0, 10)),
                          // What is the best way to optionally include a widget in a list of children
                          // https://github.com/flutter/flutter/issues/3783#issuecomment-506019822
                          if ((pos % 2) == 0)
                            Chip(
                              avatar: CircleAvatar(
                                backgroundColor: Colors.grey.shade800,
                                child: Icon(Icons.timer),
                              ),
                              label: Text('2FA'),
                            ),
                        ],
                      ),
                      trailing: Padding(
                        padding: EdgeInsets.all(10),
                        child: Wrap(
                            spacing: 10,
                            direction: Axis.vertical,
                            alignment: WrapAlignment.spaceEvenly,
                            children: <Widget>[
                              IconButton(
                                icon: Icon(
                                  Icons.check,
                                  color: Colors.grey,
                                ),
                                onPressed: () {},
                              )
                            ]),
                      ),
                      onTap: () {},
                    ),
                  ),
                ],
              ),
            ));
      },
    );
  }
}

Done. https://github.com/ta1bbty/test_flutter/blob/master/README.md — ricizawu, Apr 06 '20 at 20:22

LonelyWolf · Accepted Answer · 2020-04-07T08:19:04.577

Perhaps one way of doing it is to use Stack

ListView.builder(
      itemCount: notes.length,
      itemBuilder: (context, pos) {
        return Padding(
          padding: EdgeInsets.all(8),
          child: Stack(
            children: <Widget>[
              Card(
                margin: EdgeInsets.zero,
                child: ListTile(
                  leading: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Icon(Icons.receipt),
                    ],
                  ),
                  title: Text(
                    notes[pos],
                  ),
                  subtitle: Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text(notes[pos].substring(0, 10)),
                      if ((pos % 2) == 0)
                        Chip(
                          avatar: CircleAvatar(
                            backgroundColor: Colors.grey.shade800,
                            child: Icon(Icons.timer),
                          ),
                          label: Text('2FA'),
                        ),
                    ],
                  ),
                  trailing: Padding(
                    padding: EdgeInsets.all(10),
                    child: Wrap(
                        spacing: 10,
                        direction: Axis.vertical,
                        alignment: WrapAlignment.spaceEvenly,
                        children: <Widget>[
                          IconButton(
                            icon: Icon(
                              Icons.check,
                              color: Colors.grey,
                            ),
                            onPressed: () {},
                          )
                        ]),
                  ),
                  onTap: () {},
                ),
              ),
              Positioned(
                top: 0,
                bottom: 0,
                child: Container(
                  width: 5,
                  color: Colors.green,
                ),
              )
            ],
          ),
        );
      },
    )

Output

Another working solution I got was : https://www.reddit.com/r/Flutter/comments/fwdphy/fill_the_parent_widget_vertically_by_a_container/fmo3f16?utm_source=share&utm_medium=web2x — ricizawu, Apr 07 '20 at 19:42

Fill ListView tiles vertically by a container - Flutter

Update 1 ( Monday, 6 April 2020 8:16 pm GMT )

1 Answers1