How to use a FilledButton in flutter (Material 3)

byMR

December 23, 2022

link1 (Screenshot) : https://flutter.github.io/samples/web/material_3_demo/#/

link2 (Document) : https://api.flutter.dev/flutter/material/FilledButton-class.html#material.FilledButton.1

flutter doctor

[✓] Flutter (Channel stable, 3.3.10, on macOS 12.5.1 21G83 darwin-arm, locale ko-KR)
• Flutter version 3.3.10 on channel stable at /Users/username/development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 135454af32 (8 days ago), 2022-12-15 07:36:55 -0800
• Engine revision 3316dd8728
• Dart version 2.18.6
• DevTools version 2.15.0

I want use filled button

I try import material package like the official document code, But FilledButton class could not be found.

This widget not yet implemented?

[Edited]

I found a way to use FilledButton

[In terminal…]

flutter channel master
flutter pub upgrade

Then, Can find FilledButton class

>Solution :

No, it is not implemented yet, but you can build it with ElevatedButton like this:

ElevatedButton(
    onPressed: () {},
    child: Text("Filled"),
    style: ButtonStyle(
      minimumSize: MaterialStateProperty.all(Size(130, 40)),
      elevation: MaterialStateProperty.all(0),
      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
        RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20.0),
        ),
      ),
    ),
  ),