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

Global widget styling in Flutter

So I started working with Flutter again and back in the day there was no way to actually globally style your controls, there is a sort of messy way I guess you could say where you create const styles something like below:

static ButtonStyle elevatedButtonStyle = ElevatedButton.styleFrom(
  textStyle: TextStyle(fontSize: 20),
  backgroundColor: Constants.jaffaOrange,
  shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(10))));

And then manually apply it wherever you need it.

I was wondering if there is a way to apply this to all controls without having to actually manually assign it to each and every one of them kind of like how Xamarin has Global styling which kind of implicitly applies the styles to every single control of a particular type.

If not inbuilt is there a dependency I could import maybe?

If this is not the case what are other ways to actually maintain styles in flutter?

I don’t need an end-to-end solution for each and every control obviously as long as you can even guide me in the right direction it would immensely help!

Tags:

3

Answers


  1. 0

    You could do this by setting a button theme in the app theme right in your material app. The button theme defines the default configuration of button widgets.

    theme: ThemeData(
            buttonTheme: ButtonThemeData(
              // set some properties
            ),
          ),

darkTheme: ThemeData(
                buttonTheme: ButtonThemeData(
                  // set some properties
                ),
              ),

    Register the theme inside the material app and define the buttonTheme and pass the properties here. Should take effect on all buttons without having to style those buttons "inline".

    Login or Signup to reply.
  2. 0

    In Flutter, theming depends on MaterialApp’s theme: which takes ThemeData, and it pass down to the widget tree. For elevatedButtonTheme. it will be

    return MaterialApp(
  theme: ThemeData(
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        textStyle: TextStyle(fontSize: 20),
        backgroundColor: Constants.jaffaOrange,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
      ),
    ),
  ),

    Find more about theme in flutter.

    Login or Signup to reply.
  3. 0

    This is the full example code you can try it here:

    Example to try

    class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
  title: 'Flutter App',
  theme: ThemeData(
    textTheme: TextTheme(displayMedium: TextStyle(fontSize: 16, color: 
Colors.white)),
    elevatedButtonTheme: ElevatedButtonThemeData(
        style: ButtonStyle(
            shape: MaterialStatePropertyAll(RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10))),
            textStyle:
                const MaterialStatePropertyAll(TextStyle(fontSize: 20)),
            backgroundColor: const MaterialStatePropertyAll(Colors.red))),
    // colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
    useMaterial3: true,
  ),
  darkTheme: ThemeData(
    colorSchemeSeed: Colors.blue,
    useMaterial3: true,
    brightness: Brightness.dark,
  ),
  home: const MyHomePage(title: 'Flutter Example App'),
  debugShowCheckedModeBanner: false,
  );
  }
 }

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});

final String title;

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: (){},
          child: Text("Button 1", style: 
   Theme.of(context).textTheme.displayMedium),
        ),
        SizedBox(
          height: 10,
        ),
        ElevatedButton(
          onPressed: (){},
          child: Text("Button 2", style: 
   Theme.of(context).textTheme.displayMedium),
        ),
        SizedBox(
          height: 10,
        ),
        ElevatedButton(
          onPressed: (){},
          child: Text("Button 3", style: 
   Theme.of(context).textTheme.displayMedium),
        ),
        SizedBox(
          height: 10,
        ),
        ElevatedButton(
          onPressed: (){},
          child: Text("Button 4", style: 
     Theme.of(context).textTheme.displayMedium),
        ),
      ],
      ),
     ),
   );
  }
  }

    It looks like this

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search