Question 78786 in Flutter Question posted in
The official Flutter documentation can be found here.

How to use a FilledButton in flutter (Material 3)

enter image description here

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

Tags:

3

Answers


  1. 0

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

     ElevatedButton(onPressed: () {}, child: Text("Elevated Button")),
    Login or Signup to reply.
  2. 0

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

    enter image description here

    Login or Signup to reply.
  3. 0

    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'),
    ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search