CODEWITHSUNDEEP
flutterdartappbar
That Guy
That Guy

Reputation: 234

Set default icon theme to cupertino flutter appbar

The app that im building requires me to have an AppBar with a leading back button. However I prefer the cupertino back button(iOS-style) for the leading icon instead of the default back button for android. I am aware that I can manually change the leading button of each AppBar by using an iconButton but i was wondering if there is any easy way to do this like a theme. Any help appreciated.

Upvotes: 0

Views: 1435

Answers (2)

OverLoadedBurden
OverLoadedBurden

Reputation: 734

Facing a relatively similar problem I used the builder property, which it should work with any App like :

CupertinoApp(
      builder: (_, child) => IconTheme(
        data: IconThemeData(
          size: 15,
          color: const Color(0xffffffff),
        ),
        child: child,
      ),
)

My problem was with the default icon color and size but you can use AppBarTheme or any similar widget to achieve what you want.

This may help you override default value with majority of the lacking theme delegates when working with the cupertino family (It's not yet mature like the material but I can see the constant and rapid effort and the future of it).

Upvotes: 0

gtxtreme
gtxtreme

Reputation: 3606

Instead of using MaterialApp as your root widget you can use CupertinoApp to do the same, assuming that the above changing of the AppBar is needed for each screen in your app. This will automatically set the icon as you require

Here is a simple example to help you

Root Widget or starting point of the app

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

Then using a CupertinoPageScaffold where you want the CupertinoNavigationBar (I mean your appbar with ios icons) with the chevron icon like ios

Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        // Try removing opacity to observe the lack of a blur effect and of sliding content.
        automaticallyImplyLeading: true // This will decide if the leading icon comes in by default
        backgroundColor: CupertinoColors.systemGrey.withOpacity(0.5),
        middle: const Text('Sample Code'),
      ),
      child: Column(
        children: <Widget>[
          Container(height: 50, color: CupertinoColors.systemRed),
          Container(height: 50, color: CupertinoColors.systemGreen),
          Container(height: 50, color: CupertinoColors.systemBlue),
          Container(height: 50, color: CupertinoColors.systemYellow),
        ],
      ),
    );

Upvotes: 0

Related Questions