Comment pousser les éléments à l'extrême droite dans flutter

Question

En tant que novice en matière de style flutter, j'essaie de créer une rangée ressemblant à ceci

Je ne parviens pas à placer le champ de texte à gauche avec une largeur fluide et l'icône de voiture à l'extrême droite. J'ai essayé de le modifier avec Stack Mais le texte remplace l'icône lorsqu'il l'atteint. Quelqu'un peut-il proposer une meilleure façon de placer ces deux widgets côte à côte ?

Mon essai

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: () {})
                                    )
                                ],

                              ),
                            ),
                          ]
                        ),
                      ]
                    ),

                  ),
                ),

Answer 1

Vous devez utiliser un Row et faire de votre TextField utilise Expanded et tous les autres Widgets prennent la largeur correcte. Voici le code que vous recherchez :

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

Avec le résultat suivant :

PS : Le centre en tant que premier enfant est pour les démonstrations seulement, vous pouvez l'enlever.

Answer 2

L'exemple que vous voulez reproduire ressemble beaucoup à une ListTile (doc ici) .

J'ai pu reproduire quelque chose comme cela en utilisant votre style comme ci-dessous :

Le code pour ça est :

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