9.4 C
New York
Saturday, December 2, 2023

How to use button themes in Flutter

This is a short and straight-to-the-point guide to implementing button themes in Flutter.

In the old days, ButtonTheme used to be used but nowadays it is obsolete and has been replaced by TextButtonTheme, ElevatedButtonTheme, and OutlinedButtonTheme. Advertisements

ElevatedButtonTheme

Used for customizing the appearance and internal layout of ElevatedButtons.

Sample usage:

theme: ThemeData(
        textButtonTheme: TextButtonThemeData(
          style: TextButton.styleFrom(
            /*
            textStyle: 
            ...
            */
          )
        ),
),

TextButtonTheme

Used for customizing the appearance and internal layout of TextButtons.

Sample usage:

theme: ThemeData(
        elevatedButtonTheme: ElevatedButtonThemeData(  
          style: ElevatedButton.styleFrom(
            /*
            primary: ...,
            textStyle: ...,
            ...
            */
          )
        ),
),

OutlinedButtonTheme

Used for customizing the appearance and internal layout of OutlinedButtons.

Sample usage:

theme: ThemeData(
        outlinedButtonTheme: OutlinedButtonThemeData(  
          style: OutlinedButton.styleFrom(
            /* 
            padding: ...,
            textStyle: ...,
            ... 
            */
          )
        )
),

Example

Advertisements

Screenshot:

The complete code:

// main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.pink)
            .copyWith(secondary: Colors.amber),
        textButtonTheme: TextButtonThemeData(
            style: TextButton.styleFrom(
          textStyle: const TextStyle(
              color: Colors.deepOrange,
              fontSize: 30,
              fontWeight: FontWeight.bold),
        )),
        // elevated button theme
        elevatedButtonTheme: ElevatedButtonThemeData(
            style: ElevatedButton.styleFrom(
                padding:
                    const EdgeInsets.symmetric(horizontal: 30, vertical: 10),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20)),
                primary: Colors.orange, // background color
                textStyle: const TextStyle(
                    fontSize: 20, fontStyle: FontStyle.italic))),
        // outlined button theme
        outlinedButtonTheme: OutlinedButtonThemeData(
            style: OutlinedButton.styleFrom(
          padding: const EdgeInsets.all(15),
          textStyle: const TextStyle(
            fontSize: 30,
          ),
        )),
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Kindacode.com'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(25),
        child: Column(children: [
          TextButton(onPressed: () {}, child: const Text('Text Button')),
          const SizedBox(height: 20),
          ElevatedButton(
              onPressed: () {}, child: const Text('Elevated Button 1')),
          const SizedBox(height: 5),
          ElevatedButton(
              onPressed: () {},
              child: Text(
                'Elevated Button 2',
                style: TextStyle(color: Theme.of(context).primaryColor),
              )),
          const SizedBox(height: 20),
          OutlinedButton(onPressed: () {}, child: const Text('Outlined Button'))
        ]),
      ),
    );
  }
}

Conclusion

You’ve learned how to use themes for modern button widgets (ElevatedButton, TextButton, OutlinedButton) in Flutter. Continue moving forward and explore more interesting things by taking a look at the following articles:

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.

Advertisements

Related Articles

Latest Articles