How to push elements to the far right in flutter

user_10238136 0
Viewed 637

As a newbie to flutter stylying I am trying to create a row looking like this

enter image description here

I am unable to have the textField to the left with a fluid width and the car Icon to the far right. I tried to hack it with Stack but the text override the Icon when it reaches it. can someone offer a better way to put those two widgets side by side.

My try

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-animation flutter-layout flutter
2 Answers

You need to use a Row and make your your TextField uses Expanded and every other Widget takes the correct width. This is the code you're looking for:

Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Card(
            child: Container(
              height: 55,
              color: Colors.white,
              child: Row(
                children: [
                  SizedBox(width: 15),
                  Text('\u25FE', style: TextStyle(fontSize: 12)),
                  SizedBox(width: 15),
                  Expanded(
                    child: TextField(
                      decoration: InputDecoration(
                          hintText: 'Where to?', hintStyle: TextStyle(fontSize: 18), border: InputBorder.none),
                    ),
                  ),
                  Container(
                    width: 1,
                    margin: const EdgeInsets.symmetric(vertical: 6),
                    color: Colors.grey[400],
                  ),
                  SizedBox(width: 15),
                  Icon(Icons.directions_car),
                  SizedBox(width: 15),
                ],
              ),
            ),
          ),
        ),
      )

With the following result:

Uber TextField Example

PS: Center as first child is for demonstrations only, you can remove it.

user_37432450

The example you want to reproduce looks a lot like a ListTile (doc here).

I was able to reproduce something like it using your style like below :

ListTile

The code for it is:

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),
      ),
    );
user_132388990
Related