Question 385763 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Custom Floating Rounded Appbar

I want to make a rounded container search bar that opens a drawer similar to in the Google Chats app (see screenshot). Not sure how to make the floating app bar and rounded borders for the AppBar.

Here is a screenshot of what I would like it to look like. The menu will open a drawer.enter image description here

Tags:

3

Answers


  1. 0

    You can create your own custom AppBar.
    Create a TextField with rounded borders and use prefix and suffix icons, prefixIcon for menu and suffixIcon for the avatar.

    To open the drawer, use this:

     InkWell(
   onTap: () => Scaffold.of(context).openDrawer(),
   child: Icon(
      Icons.menu,
   ),
 ),
    Login or Signup to reply.
  2. 0

    you can create custom AppBar in flutter with implementing PreferedSizedWidget like below:

    
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  const CustomAppBar({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: preferredSize.height,
      margin: EdgeInsets.only(
        top: MediaQuery.of(context).padding.top + 20,
        left: 10,
        right: 10,
      ),
      padding: const EdgeInsets.symmetric(horizontal: 10),
      decoration: BoxDecoration(
        color: Colors.grey[600],
        borderRadius: BorderRadius.circular(20),
      ),
      alignment: Alignment.center,
      child: Row(
        children: [
          IconButton(
            icon: const Icon(Icons.menu),
            onPressed: () {
              Scaffold.of(context).openDrawer();
            },
            color: Colors.white,
          ),
          const Expanded(
            child: TextField(
              decoration: InputDecoration(
                hintText: 'Search in chat...',
                hintStyle: TextStyle(color: Colors.white),
                border: InputBorder.none,
              ),
            ),
          ),
          const CircleAvatar(
            backgroundImage: NetworkImage(
              'https://avatars.githubusercontent.com/u/139426?s=400&u=3b3f',
            ),
          ),
        ],
      ),
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(80);
}

    And use it in your Scaffold Like this:

    
class FloatingAppBar extends StatelessWidget {
  const FloatingAppBar({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      backgroundColor: Colors.black,
      appBar: const CustomAppBar(),
      drawer: const Drawer(),
      body: ListView.builder(
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(
              'Item $index',
              style: const TextStyle(color: Colors.white),
            ),
          );
        },
        itemCount: 1000,
      ),
    );
  }
}

    This is the result:

    enter image description here

    Login or Signup to reply.
  3. 0

    Try below code

    Key:

      final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();

    UI:

    Scaffold(
    key: scaffoldKey,
    drawer: DrawerWidget(),
    body: Padding(
      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
      child: Column(
        children: [
          SizedBox(height: 10),
          Container(
            decoration: BoxDecoration(
              color: Colors.black38,
              borderRadius: BorderRadius.circular(30),
            ),
            child: TextFormField(
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: 'Search in chat',
                fillColor: Colors.white,
                prefixIcon: IconButton(
                  icon: Icon(Icons.menu),
                  onPressed: () {
                    scaffoldKey.currentState!.openDrawer();
                  },
                ),
                suffixIcon: Padding(
                  padding: EdgeInsets.symmetric(
                    horizontal: 10,
                  ),
                  child: CircleAvatar(
                    backgroundImage: NetworkImage(
                      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvc_ZZ4vWBG8Es2imhpvDXoF8XuYLAXDsGKo98oJwTRw&s',
                    ),
                  ),
                ),
              ),
            ),
          ),
          SizedBox(height: 20),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('Home'),
              Container(
                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  border: Border.all(color: Colors.yellow.shade400),
                ),
                child: Text('Unread'),
              ),
            ],
          ),
        ],
      ),
    ),
  ),

    Drawer UI:

    class DrawerWidget extends StatelessWidget {
  const DrawerWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Drawer();
  }
}

    Result: image

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search