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

row to create two rows on appbar flutter

How to create appbar like the image below:

enter image description here

Tags:

2

Answers


  1. 0

    There are two ways (that I know of) to achieve this

    With Appbar
    You can use the flexibleSpace property inside of AppBar combining with SafeArea to achieve this.

    AppBar(
  flexibleSpace: SafeArea(
    child: Column(...)
  )
...
)

    With Body
    You can use Stack and the Positioned widget

    body: Stack(
  child: Positioned(
     top: 0
     child: ...
  )
    Login or Signup to reply.
  2. 0

    In Flutter, the AppBar widget has a parameter called appBar which is of type PreferredSize. The PreferredSize class has two parameters of its own: child and preferredSize. You can create your own widget and set it as the value for the appBar parameter of the AppBar widget by using these parameters. You can create something like

    class CustomAppBar extends PreferredSize {
  const CustomAppBar({
    super.key,
    required super.child,
    required super.preferredSize,
  });

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

    and assign it to your appBar widget

    The final code will look like

    class Example extends StatefulWidget {
  const Example({super.key});

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: CustomAppBar(
        preferredSize: Size(width, height),
        child: const Column(
          children: [
            Row(),
            Column(),
          ],
        ),
      )
      body: const Center(
        child: Text('Example'),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search