Skip to content

Conversation

@predatorx7
Copy link
Contributor

@predatorx7 predatorx7 commented Jan 10, 2023

This adds the ability to override the back button, close button, drawer button, and end drawer button icons. This also adds CloseButtonIcon, DraweButton, DrawerButtonIcon, EndDrawerButton, and EndDrawerButtonIcon.

Fixes #117578
Fixes #107646

Pre-launch Checklist

  • I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
  • I read the [Tree Hygiene] wiki page, which explains my responsibilities.
  • I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement].
  • I signed the [CLA].
  • I listed at least one issue that this PR fixes in the description above.
  • I updated/added relevant documentation (doc comments with ///).
  • I added new tests to check the change I am making, or this PR is [test-exempt].
  • All existing and new tests are passing.

Example Gist

Example for overriding action icons using ActionButtonIconsData in ThemeData
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

final hasCustomActionIconsNotifier = ValueNotifier(true);

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

  @override
  Widget build(BuildContext context) {
    final localization = MaterialLocalizations.of(context);
    return Icon(
      Icons.more_horiz_rounded,
      semanticLabel: localization.openAppDrawerTooltip,
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final localization = MaterialLocalizations.of(context);
    return Icon(
      Icons.segment_rounded,
      semanticLabel: localization.openAppDrawerTooltip,
    );
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: hasCustomActionIconsNotifier,
      builder: (context, _) {
        final isCustomActionIconsEnabled = hasCustomActionIconsNotifier.value;
        return MaterialApp(
          title: 'Flutter Demo',
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            useMaterial3: true,
            actionButtonIcons: isCustomActionIconsEnabled
                ? ActionButtonIconsData(
                    backButtonIconBuilder: (context) {
                      return const Icon(Icons.arrow_back_ios_new_rounded);
                    },
                    drawerButtonIconBuilder: (context) {
                      return const _DrawerButton();
                    },
                    endDrawerButtonIconBuilder: (context) {
                      return const _EndDrawerButton();
                    },
                  )
                : null,
          ),
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      drawer: const Drawer(),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Flexible(
              child: ConstrainedBox(
                constraints: const BoxConstraints(
                  maxWidth: 600,
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    AnimatedBuilder(
                      animation: hasCustomActionIconsNotifier,
                      builder: (context, _) {
                        return SwitchListTile(
                          value: hasCustomActionIconsNotifier.value,
                          onChanged: (value) {
                            hasCustomActionIconsNotifier.value = value;
                          },
                          title: const Text('Enable custom action icons'),
                        );
                      },
                    ),
                    ListTile(
                      onTap: () {
                        Navigator.of(context).push(
                          MaterialPageRoute(builder: (context) {
                            return const MySecondPage();
                          }),
                        );
                      },
                      title: const Text('Next page'),
                      trailing: const Icon(Icons.forward),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class MySecondPage extends StatelessWidget {
  const MySecondPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second page'),
      ),
      endDrawer: const Drawer(),
    );
  }
}
Screenshots

Customized

Customized Drawer button
Customed EndDrawer and Back button

Default

Default Drawer button
Default EndDrawer and Back button

@flutter-dashboard flutter-dashboard bot added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Jan 10, 2023
@flutter-dashboard
Copy link

It looks like this pull request may not have tests. Please make sure to add tests before merging. If you need an exemption to this rule, contact Hixie on the #hackers channel in Chat (don't just cc him here, he won't see it! He's on Discord!).

If you are not sure if you need tests, consider this rule of thumb: the purpose of a test is to make sure someone doesn't accidentally revert the fix. Ask yourself, is there anything in your PR that you feel it is important we not accidentally revert back to how it was before your fix?

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

@HansMuller
Copy link
Contributor

This isn't entirely conventional but it's close. I would have expected an ActionIconTheme and ActionIconThemeData. If you moved all of the action buttons and icons to action_buttons.dart you could probably factor out some common implementation into private classes.

CC @darrenaustin @QuncCccccc @guidezpl @esouthren

@predatorx7
Copy link
Contributor Author

@HansMuller, I've refactored the code as per your suggestions. If it looks good then I can write tests for them.

@HansMuller HansMuller self-requested a review January 13, 2023 18:00
@HansMuller
Copy link
Contributor

HansMuller commented Jan 13, 2023

This appears to be headed in a good direction. Two things:

Copy link
Contributor

@HansMuller HansMuller left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good, just a few minor issues plus some tests. Ideally an example (with a test) would be included as well.

@@ -0,0 +1,174 @@
// Copyright 2014 The Flutter Authors. All rights reserved.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file should be called action_icons_theme.dart

@flutter-dashboard flutter-dashboard bot added d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos labels Jan 20, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 23, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 23, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 23, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 24, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 24, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 24, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 24, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 24, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 24, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 25, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 25, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 26, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 26, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 26, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 27, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 27, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 27, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 27, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 27, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 27, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 27, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 10, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

c: contributor-productivity Team-specific productivity, code health, technical debt. d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Allow option to set back, close, and drawer button icons in AppBar in AppBarTheme BackButtonIcon should never use iOS/MacOS style when running on Web

3 participants