Shaping appbar in flutter

Question

Someone asked this question before with no straight answer: Is there a way to shape the appbar to look like this photo ?

Check this link, i think it would solve your problem! https://stackoverflow.com/questions/53658208/custom-appbar-flutter — Trần Trung Hiếu, Oct 01 '21 at 14:11

score 0 · Answer 1 · answered Oct 01 '21 at 14:35

i dont think you can do it with the AppBar widget, but you can build your own like this: not my best code but i think this can help you have an idea on how to do it

Widget build(BuildContext context)
return Scaffold(
  body: SafeArea(
      child: SingleChildScrollView(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            IconButton(
                onPressed: () {}, icon: const Icon(Icons.arrow_back)),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                IconButton(
                    onPressed: () {}, icon: const Icon(Icons.search)),
                IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.notifications),
                ),
              ],
            )
          ],
        ),
        SizedBox(
          height: 40,
        ),
        Container(
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(30), color: Colors.green),
          height: MediaQuery.of(context).size.height,
        )
      ],
    ),
  )),
  floatingActionButton: FloatingActionButton(
    onPressed: _incrementCounter,
    tooltip: 'Increment',
    child: const Icon(Icons.add),
  ),
);

}`

Shaping appbar in flutter

1 Answers1