how we can use two rows in appbar flutter Like first row with title and the second with search input field

Question

Hi There I am working on a app where i need to use two sections in appbar one upper 1->section with logo and some Icons 2-> Search input field below the Title Section.

UI images are attached for better understanding.

Solution 1

you can customize the size of app bar by using toolbarHeight: 120.0 // set value then use flexibleSpace to add column or rows it will look something like this

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          toolbarHeight: 120.10, //set your height
          flexibleSpace: SafeArea(
            child: Container(
              color: Colors.blue, // set your color
              child: Column(
                children: [
                  Row(
                    children: [Text("Logo")],
                  ),
                  Text("data"), // set an icon or image
                  IconButton(
                      icon: Icon(Icons.search),
                      onPressed: () {}) // set your search bar setting
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Solution 2

Just simply create your AppBar as intended, in your screenshot, you don't actually need a second Row. A TextFormField will be enough (you will actually need to customise the InputDecoration as well):

    return AppBar(
      title: Column(children: [
        Row(children: [
          Icon(Icons.menu),
          Text('First row'),
          const Spacer(),
          Icon(Icons.person),
        ]),
        TextFormField(),
      ]),
    );

Comments

[SilkeNL]

Do you have any code to show what you tried?

[Farhan Aslam]

The getter 'height' was called on null. Receiver: null Tried calling: height

[Farhan Aslam]

I tried it but it's raising error of null.

[BLKKKBVSIK]

@FarhanAslam Remove the null and update it with Size.fromHeight(50.0)

[Farhan Aslam]

I tried it but all in vain it has postioning issue more than that It overlaps with other layers and.