CODEWITHSUNDEEP
flutterdartflutter-layout
Arbër
Arbër

Reputation: 15

How to create android 12 pill shape app bar in flutter?

I was wandering if its a way in flutter to include an app bar like the one in android 12 Google apps (like: Play store, messages, phone etc).

A screenshot of what I want to implement

Upvotes: 0

Views: 987

Answers (2)

IonicFireBaseApp
IonicFireBaseApp

Reputation: 1230

It's very easy you just need to put TextFormField/TextField inside a container like

                                    Container(
                                                 ....
                                                decoration: BoxDecoration(
                                                borderRadius:
                                                     BorderRadius.circular(
                                                          15), 
                                                child:  TextFormField(
                                                        decoration:InputDecoration(prefixIcon: 'YOUR PREFIX ICON WIDGET', prefixIcon: 'YOUR SUFFIX ICON WIDGET MAY BE A ROW WIDGET'
                                                   
                                                    ))
                                                  ....

to change look and feel use container more decoration properties like color and others.

Upvotes: 0

Sujan Gainju
Sujan Gainju

Reputation: 4769

It is just a combination of widgets with some decorations

wireframe would be

  • Container with decorations
    • Row
      • Expanded Textfield with suffix and prefix
      • SizedBox with some width
      • Icon button

Create a widget following those and should be able to create that

Upvotes: 2

Related Questions