flutter - 在flutter中，如何在输入文本前面创建扩展点

Question

如何在输入前面创建扩展列表，目标是创建如下图所示的出发到达表单，

我已经尝试使用 ListTile 但我不知道如何创建这样的扩展点，

到目前为止，我的代码是这样的，但我不知道如何创建连接图标之间的点，

FormBuilder(
                      key: _setupTripForm,
                      child: Column(
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.only(
                              left: 12.0,
                              right: 12.0,
                              bottom: 8.0,
                              top: 8.0,
                            ),
                            child: FormBuilderTextField(
                              attribute: "dDetailName",
                              decoration: InputDecoration(
                                fillColor: GudtipColors.greyLight,
                                filled: true,
                                border: InputBorder.none,
                                hintText: 'Enter your location',
                                icon: Icon(
                                  MdiIcons.circleSlice8,
                                  color: Colors.blueAccent,
                                ),
                              ),
                              maxLines: 1,
                              validators: [
                                FormBuilderValidators.required(),
                                FormBuilderValidators.minLength(2),
                                FormBuilderValidators.maxLength(128),
                              ],
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(left: 12.0, right: 12.0),
                            child: FormBuilderTextField(
                              attribute: "dDetailName",
                              decoration: InputDecoration(
                                fillColor: GudtipColors.greyLight,
                                filled: true,
                                border: InputBorder.none,
                                hintText: 'Enter your destination',
                                icon: Icon(
                                  MdiIcons.mapMarker,
                                  color: Colors.redAccent,
                                ),
                              ),
                              maxLines: 1,
                              validators: [
                                FormBuilderValidators.required(),
                                FormBuilderValidators.minLength(2),
                                FormBuilderValidators.maxLength(128),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),

谢谢。

Answer 1

你可以这样处理

Row __
     |__ Column
     |        |__ Icons[]
     |
     |__ Column
              |__ Widgets[]

下面的代码将为您提供一个想法。

Container(
        margin: EdgeInsets.all(8.0),
        height: 100.0,
        child: Row(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Column(
              mainAxisAlignment: MainAxisAlignment.center,

              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(bottom: 4.0),
                  child: Icon(Icons.trip_origin, color: Colors.blue,),
                ),
                Icon(Icons.fiber_manual_record, color: Colors.grey, size: 12),
                Icon(Icons.fiber_manual_record, color: Colors.grey, size: 12),
                Icon(Icons.fiber_manual_record, color: Colors.grey, size: 12),
                Padding(
                  padding: const EdgeInsets.only(top: 4.0),
                  child: Icon(Icons.location_on, color: Colors.red,),
                ),
              ],
            ),

            Expanded(
              child: Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    height: 40.0,
                    color: Colors.grey,
                    child: Center(
                      child: Text("Your widget here"),
                    ),
                  ),
                  Container(
                    height: 40.0,
                    margin: EdgeInsets.only(top: 4.0),
                    color: Colors.greenAccent,
                    child: Center(
                      child: Text("Your widget here"),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      )