如何在颤动中将元素推到最右边

问题描述 投票:1回答:1

作为一个新手,我正在尝试创建一个看起来像这样的行

enter image description here

我无法将textField的宽度固定在左侧,而将汽车Icon设置在最右侧。我试图用Stack对其进行破解,但文字在到达图标时会覆盖图标。有人可以提供更好的方法来将这两个小部件并排放置。

我的尝试

Positioned(
                  top: 50.0,
                  right: 15.0,
                  left: 15.0,
                  child: Container(
                    height: 50.0,
                    width: double.infinity,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(3.0),
                      color: Colors.white,
                      boxShadow: [
                        BoxShadow(
                            color: Colors.grey,
                            offset: Offset(1.0, 5.0),
                            blurRadius: 10,
                            spreadRadius: 3)
                      ],
                    ),
                    child: Column(
                      children: <Widget>[
                        Row(
                          children: <Widget>[
                            Expanded(
                              child: Stack(
                                children: [
                                  TextField(
                                    cursorColor: Colors.black,
                                    // controller: appState.locationController,
                                    decoration: InputDecoration(

                                      hintText: "pick up",
                                      border: InputBorder.none,
                                      // mainAxisAlignment: MainAxisAlignment.center,
                                      // crossAxisAlignment: CrossAxisAlignment.center,
                                      // contentPadding: EdgeInsets.only(left: 15.0, top: 16.0),
                                      icon: Container(
                                        margin: EdgeInsets.only(left: 10),
                                        width: 10,
                                        height: 10,
                                        child: Icon(
                                          Icons.location_on,
                                          color: Colors.black,
                                        ),
                                      ),
                                    ),
                                  ),
                                  Positioned(
                                    right: 8,
                                    child: IconButton(icon: Icon(Icons.business), onPressed: () {})
                                    )
                                ],

                              ),
                            ),
                          ]
                        ),
                      ]
                    ),

                  ),
                ),
flutter flutter-layout flutter-animation
1个回答
0
投票

您要复制的示例看起来很像ListTile (doc here)

我能够使用以下样式重现类似内容:

ListTile

其代码为:

Container(
      color: Colors.black,
      child: ListTile(
        leading: Icon(Icons.location_on),
        title: TextField(
          cursorColor: Colors.black,
          decoration: InputDecoration(
            hintText: "Pick up",
            border: InputBorder.none,
          ),
        ),
        trailing: Icon(Icons.business),
      ),
    );
© www.soinside.com 2019 - 2024. All rights reserved.