Flutter: AppBar shape (rounded top corners with different background for toolbar and appbar)

user_14572433 0
Viewed 4045

I need to achieve something like this: AppBar - my target

I tried using border radius

    Widget build(BuildContext context) {
  final _appBar = AppBar(
    elevation: 6.0,
    shape: ContinuousRectangleBorder(
      borderRadius: const BorderRadius.only(
        topLeft: Radius.circular(90.0),
      ),),
    title: Text(listPagesNames[_cIndex]),
  );

But it changed the left top corner at the level of the tool bar. And not by much (even though I set radius at 90.0) Using border radius

And I thought, well maybe I can change the size. Because I can change the background color of tool bar using services package:

import 'package:flutter/services.dart'; 

class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
          statusBarColor: kMainRedPalette,
        ));

But using the size, the ApBar still 'starts' at the same place.

I thouht maybe something with offset (because I can already change the toolbar color), but I'm not sure how can I ofset appBar (and if it is possible at all). I'm new to dart, so any idea will be helpful :)

flutter-layout dart flutter
2 Answers

Something like this??

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() async {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.red,
  ));
  runApp(MaterialApp(debugShowCheckedModeBanner: false, home: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: AppBar().preferredSize,
        child: SafeArea(
          child: Container(
            color: Colors.red,
            child: AppBar(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(25.0),
                  topRight: Radius.circular(25.0)
                )
              ),
              elevation: 8,
              backgroundColor: Colors.white,
              leading: Icon(Icons.menu, color: Colors.black,),
            ),
          ),
        ),
      ),
      body: Container(color: Colors.white,),
    );
  }
}
user_130890960

@Will Hlas answer solves my problem :)

If anyone will need to use "tapable" leading icon as e.g. drawer opener, remember to wrap Icon in IconButton widget and place it into another Builder (just like in code below; code based on Will's answer).

appBar: PreferredSize(
    preferredSize: AppBar().preferredSize,
    child: SafeArea(
      child: Container(
        color: Colors.red,
        child: AppBar(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(25.0),
              topRight: Radius.circular(25.0),
            ),
          ),
          elevation: 8,
          backgroundColor: Colors.white,
          leading: Builder(
            builder: (context) => IconButton(
              icon: Icon(
                Icons.menu,
                color: Colors.black,
              ),
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
              tooltip:
                  MaterialLocalizations.of(context).openAppDrawerTooltip,
            ),
          ),
          title: Text('Text on AppBar',
            style: TextStyle(color: Colors.black),
          ),
        ),
user_145724330
Related