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

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