Apply ButtonStyle Properties to All Buttons Globally-CodePudding

I've implemented several long ListViews containing ElevatedButtons in my flutter project, and would now like to apply various ButtonStyle properties to all of them. I am certain there is a way to avoid applying these properties to each button individually, but haven't been able to find anything in the Flutter docs or on Stack Overflow. Can this task be done globally?

Currently buttons have basic styling:

            ElevatedButton(
                style: const ButtonStyle(),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => authorA()),
                  );
                },
                child: const Text("Author A")),
            ElevatedButton(
                style: const ButtonStyle(),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => AuthorB()),
                  );
                },
                child: const Text("Author B")),
            ElevatedButton(
                style: const ButtonStyle(),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => AuthorC()),
                  );
                },
                child: const Text("Author C)")),

My ListView contains hundreds of these buttons, and there are several other long ListViews containing buttons that I would like to style as well. what if I wanted to modify the ButtonStyle() property for all of them like below:

            ElevatedButton(
                style:   ButtonStyle(
                  backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => AuthorA()),
                  );
                },
                child: const Text("Author A")),

CodePudding user response：

Use theme or darkTheme property of MaterialApp to set global styles.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            primary: Colors.green,
          ),
        ),
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

CodePudding user response：

main.dart

MaterialApp(
  theme: ThemeData(
    elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
        primary: Colors.orange,
      ),
    ),
  ),
);

CodePudding user response：

A ButtonStyle that overrides the default appearance of ElevatedButtons when it's used with ElevatedButtonTheme or with the overall Theme's ThemeData.elevatedButtonTheme.

The style's properties override ElevatedButton's default style, i.e. the ButtonStyle returned by ElevatedButton.defaultStyleOf. Only the style's non-null property values or resolved non-null MaterialStateProperty values are used.

 MaterialApp(
      theme: ThemeData(
        elevatedButtonTheme: ElevatedButtonThemeData(
            style: ElevatedButton.styleFrom(
            primary: Colors.orange,
          ),
        ),
      ),
    );

CodePudding user response：

Using the same properties add different styles as you want this is possible using .. Operator.

ElevatedButton(
                style: const ButtonStyle()..,//Just Add .. here and add new color and properties
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => authorA()),
                  );
                },
                child: const Text("Author A")),

CodePudding user response：

use -> MaterialApp -> theme -> elevatedButtonTheme -> style -> with styleForm -> primary : #Color