CODEWITHSUNDEEP
fluttermaterial3
silvershort
silvershort

Reputation: 307

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

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

Upvotes: 11

Views: 9334

Answers (6)

Wahab Khan Jadon
Wahab Khan Jadon

Reputation: 1196

MaterialStateProperty is depreciated and replaced by WidgetStateProperty...

ElevatedButton(
              onPressed: voidCallback,
              style: ButtonStyle(
                backgroundColor: WidgetStateProperty.all(primaryColor),
                minimumSize: WidgetStateProperty.all(Size(100, 40)),
                elevation: WidgetStateProperty.all(0),
                shape: WidgetStateProperty.all<RoundedRectangleBorder>(
                  RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
                ),
              ),
              child: Text(buttonTitle, style: TextStyle(color: Colors.white)),
            ),

enter image description here

Upvotes: 0

Erick Lanford Xenes
Erick Lanford Xenes

Reputation: 1572

Sample code they use to get those buttons:

        ElevatedButton(
          onPressed: isDisabled ? null : () {},
          child: const Text('Elevated'),
        ),
        colDivider,
        FilledButton(
          onPressed: isDisabled ? null : () {},
          child: const Text('Filled'),
        ),
        colDivider,
        FilledButton.tonal(
          onPressed: isDisabled ? null : () {},
          child: const Text('Filled tonal'),
        ),
        colDivider,
        OutlinedButton(
          onPressed: isDisabled ? null : () {},
          child: const Text('Outlined'),
        ),
        colDivider,
        TextButton(
          onPressed: isDisabled ? null : () {},
          child: const Text('Text'),
        ),

you could found more detail here

Upvotes: 1

Jorge Vieira
Jorge Vieira

Reputation: 3072

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

Upvotes: 2

Vic Stalkeur
Vic Stalkeur

Reputation: 121

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

Upvotes: 0

eamirho3ein
eamirho3ein

Reputation: 17940

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

Upvotes: 4

Munsif Ali
Munsif Ali

Reputation: 6131

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

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

Upvotes: 0

Related Questions