How to use a FilledButton in flutter (Material 3)

Question

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

score 2 · Accepted Answer · answered Dec 23 '22 at 08:42

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),
        ),
      ),
    ),
  ),

Jorge Vieira · Answer 2 · 2023-08-23T11:55:51.683

1

The M3 buttons are now available on flutter, FilledButton and FilledButton.tonal

FilledButton.tonal(
   onPressed: () {},
   child: const Text('Enabled'),
)

https://api.flutter.dev/flutter/material/FilledButton-class.html

edited Aug 23 '23 at 11:55

answered Jun 09 '23 at 11:54

Jorge Vieira

2,784
3
24
34

score 0 · Answer 3 · answered Dec 23 '22 at 08:08

0

there isn't any filled button in flutter you can use ElevatedButton to get like this button

 ElevatedButton(onPressed: () {}, child: Text("Elevated Button")),

answered Dec 23 '22 at 08:08

Munsif Ali

1,839
1
8
22

flutter have three types of button ElevatedButton,TextButton,OutlinedButton about which you can learn more in the doc https://docs.flutter.dev/development/ui/widgets/material – Munsif Ali Dec 23 '22 at 08:14
There is actually FilledButton and even the .tonal option with latest Flutter version https://api.flutter.dev/flutter/material/FilledButton-class.html – Psalms Kalu Jul 06 '23 at 09:52

score 0 · Answer 4 · answered Apr 09 '23 at 10:17

This repository contains the official demo.

Use an emulator to determine which M3 button corresponds to the Flutter. In your case, the FilledButton is an ElevatedButton with specific properties. (note: the 0 elevation)

https://github.com/BoltUIX/Flutter-material-design-3

    ElevatedButton(
      style: ElevatedButton.styleFrom(
        foregroundColor: Theme.of(context).colorScheme.onPrimary, backgroundColor: Theme.of(context).colorScheme.primary,
      ).copyWith(elevation: ButtonStyleButton.allOrNull(0.0)),
      onPressed: () {  },
      child: const Text('Filled'),
    ),

How to use a FilledButton in flutter (Material 3)

4 Answers4