Flutter expand column inside row

Question

I am trying to create this design. . My code

Row(
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "${DateFormat("hh:mm aa").format(DateTime.parse(requestDetails.goTime))}",
                      style: TextStyle(fontSize: 12),
                    ),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      mainAxisSize: MainAxisSize.max,
                      children: <Widget>[
                        Container(
                          margin: EdgeInsets.only(top: 3),
                          width: 8,
                          height: 8,
                          decoration: BoxDecoration(
                              color: Colors.green,
                              borderRadius: BorderRadius.circular(15.0)),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 3),
                          width: 4,
                          height: 4,
                          decoration: BoxDecoration(
                              color: Colors.grey,
                              borderRadius: BorderRadius.circular(15.0)),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 3),
                          width: 4,
                          height: 4,
                          decoration: BoxDecoration(
                              color: Colors.grey,
                              borderRadius: BorderRadius.circular(15.0)),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 3),
                          width: 4,
                          height: 4,
                          decoration: BoxDecoration(
                              color: Colors.grey,
                              borderRadius: BorderRadius.circular(15.0)),
                        ),

                      ],
                    ),

                    Flexible(
                      child: Text(
                        "${requestDetails.goAddress} ${requestDetails.goAddress}${requestDetails.goAddress}",
                        overflow: TextOverflow.clip,
                        style: TextStyle(fontSize: 14),
                      ),
                    ),
                  ],
                )

All I got is this. I want that dots to expand as address lines increases. Or is there a better approach in implementing the same. Is there a plugin to help this screen? This whole widget comes inside a ListView widget. Trying to create this for almost 4 hours from now. Please help.

Answer 1

Wrap your Row with IntrinsicHeight widget and then wrap your widget that makes this dots shape with the Expanded widget.

So your item will be like this:

  Widget _buildItem(String text) {
    return  IntrinsicHeight(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [Text('01:59 AM'), Text('07:30 PM')]),
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  width: 7,
                  height: 7,
                  decoration: BoxDecoration(
                    color: Colors.green,
                    shape: BoxShape.circle,
                  ),
                ),
                Expanded(
                  child: Container(width: 2, color: Colors.grey),
                ),
                Container(
                  width: 7,
                  height: 7,
                  decoration: BoxDecoration(
                    color: Colors.red,
                    shape: BoxShape.circle,
                  ),
                ),
              ],
            ),
            Text(text)
          ],
        ),
      
    );
  }

And here is the output UI:

The full code example:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(
      padding: EdgeInsets.all(8),
      children: [
        _buildItem('''texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext'''),
        Divider(
          color: Colors.grey,
          thickness: .5,
        ),
        _buildItem('''texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext'''),
        Divider(
          color: Colors.grey,
          thickness: .5,
        ),
        _buildItem('''texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext'''),
        Divider(
          color: Colors.grey,
          thickness: .5,
        ),
        _buildItem(
            '''texttexttexttexttexttexttexttexttexttexttexttexttexttext'''),
      ],
    ));
  }

  Widget _buildItem(String text) {
    return IntrinsicHeight(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [Text('01:59 AM'), Text('07:30 PM')]),
          Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                width: 7,
                height: 7,
                decoration: BoxDecoration(
                  color: Colors.green,
                  shape: BoxShape.circle,
                ),
              ),
              Expanded(
                child: Container(width: 2, color: Colors.grey),
              ),
              Container(
                width: 7,
                height: 7,
                decoration: BoxDecoration(
                  color: Colors.red,
                  shape: BoxShape.circle,
                ),
              ),
            ],
          ),
          Text(text)
        ],
      ),
    );
  }
}

Answer 2

If you don't want to set a strictly fixed height (for example, a list can consist of either 1 element or 100 elements), you can do the following:

return ConstrainedBox(
        constraints:
            BoxConstraints(maxHeight: maxHeight),
        child: ListView.builder(
            shrinkWrap: true,
            itemCount: count,
            itemBuilder: (context, index) {
              return Container(height: 20);
            }));

In this case, you will only specify the maximum possible height, if your ListView is smaller, it will take its height, but it will not be greater than the height specified in constraints.

Answer 3

This code snipped with a little bit of styling should achieve the design from the image. Good luck. :)

 import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: true,
        home: Scaffold(
            body: SafeArea(
                child: ListView(
          children: <Widget>[
            getCard(),
            getCard(),
            getCard(),
            getCard(),
            getCard(),
            getCard(),
            getCard(),
            getCard(),
          ],
        ))));
  }

  getCard() {
    return Container(
        margin: EdgeInsets.all(10),
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius:
                BorderRadius.circular(8),
            boxShadow: [
              BoxShadow(
                color: Color.fromRGBO(
                    0, 64, 101, 0.15),
                spreadRadius: 1,
                blurRadius: 8,
                offset: Offset(0,
                    2), // changes position of shadow
              ),
            ]),
        padding: EdgeInsets.all(15),
        height: 90,
        width: double.infinity,
        child: Row(
          children: <Widget>[
            Padding(
                padding: EdgeInsets.only(
                    left: 5, right: 5),
                child: Column(
                  mainAxisAlignment:
                      MainAxisAlignment
                          .spaceBetween,
                  children: <Widget>[
                    Text("01:53PM"),
                    Text("01:53PM"),
                    // Text(
                    //     "7/1, 2nd block more adress etc."),
                  ],
                )),
            Padding(
                padding: EdgeInsets.only(
                    left: 5, right: 5),
                child: Column(
                  mainAxisAlignment:
                      MainAxisAlignment
                          .spaceBetween,
                  children: <Widget>[
                    Padding(
                        padding: EdgeInsets.only(
                            top: 3),
                        child: getDot(true)),
                    getDot(false),
                    getDot(false),
                    getDot(false),
                    getDot(false),
                    Padding(
                        padding: EdgeInsets.only(
                            bottom: 3),
                        child: getDot(true)),
                  ],
                )),
            Padding(
                padding: EdgeInsets.only(
                    left: 5, right: 5),
                child: Column(
                  mainAxisAlignment:
                      MainAxisAlignment
                          .spaceBetween,
                  children: <Widget>[
                    Text(
                        "333 Prospect St, Niagara Falls, NY 14303"),
                    Text(
                        "333 Prospect St, Niagara Falls, NY 14303"),
                  ],
                ))
          ],
        ));
  }

  Widget getDot(bool isBig) {
    return Container(
        margin: EdgeInsets.only(top: 3),
        width: isBig ? 8 : 4,
        height: isBig ? 8 : 4,
        decoration: BoxDecoration(
            color: Colors.green,
            borderRadius:
                BorderRadius.circular(15.0)));
  }
}