CODEWITHSUNDEEP
flutter
Alaric James Hartsock
Alaric James Hartsock

Reputation: 375

is there any way to clip an appbar in flutter?

I'm trying to clip two of the appbars corners. I unfortunately can't find anything and I was wondering if there's a work around. Or, possibly if somebody would be kind enough to help me by breaking into Appbar's original code and modifying in some way to clip it.

Upvotes: 3

Views: 3123

Answers (2)

anmol.majhail
anmol.majhail

Reputation: 51206

For those who don't want to use Master channel & are on stable channel - other workaround is using - ClipRRect

Scaffold(
                appBar: PreferredSize(
                  preferredSize: Size.fromHeight(kToolbarHeight),
                  child: ClipRRect(
                    clipBehavior: Clip.antiAlias,
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(20.0),
                        bottomRight: Radius.circular(20.0)),
                    child: AppBar(
                      centerTitle: true,
                      title: Text(title),
                    ),
                  ),
                ),

enter image description here

Upvotes: 6

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657406

You might look for the shapeBorder option added with https://github.com/flutter/flutter/pull/21834

  const RoundedRectangleBorder roundedRectangleBorder = RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(15.0)));

  MaterialApp(
    home: AppBar(
      leading: const Text('L'),
      title: const Text('No Scaffold'),
      shape: roundedRectangleBorder,
      actions: const <Widget>[Text('A1'), Text('A2')],
    ),
  ),

It seems this is only available in master yet and not shown in the docs.

flutter channel master
flutter doctor

Upvotes: 4

Related Questions