Flutter展开行内的列

Question

我正在尝试创建此设计。。我的代码

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

我只有这个。我希望这些点随着地址线的增加而扩展。还是有更好的方法来实现这一点。有帮助该屏幕的插件吗？整个小部件都位于ListView小部件内。从现在开始尝试创建将近4个小时。请帮助。

Answer 1

此代码经过一些样式修饰后，应该可以从图像实现设计。祝好运。 :)

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>[
                        getDot(true),
                        getDot(false),
                        getDot(false),
                        getDot(false),
                        getDot(false),
                        Padding(
                            padding: EdgeInsets.only(
                                bottom: 5),
                            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)));
      }
    }