Category

Flutter

Category

3 Flutter FlatButton Or Flutter Text Button Examples With Tutorial

flutter text button flatbutton
There are many widgets in Flutter to make a better user interface. In every UI, Buttons have their own important role.

From this post, you will start to learn about the Flutter button widgets. Such as FlatButton, RaisedButton, OutlineButton, and more.

So let’s start with Flutter FlatButton, and it is also called Flutter Text Button.

Flutter FlatButton

flutter flatbutton or flutter text button
flutter flatbutton or flutter text button

Text Button ??

Yes, Because by default, it’s just a black text or label without any

  • borders
  • elevation

You can use flatbutton in toolbars, dialogs, cards, and where ever enough space to add. Flatbutton also make the icon widget using FlatButton.icon().

FlatButton Simple Example

So let’s start programming and make a simple FlatButton like below.

flutter flatbutton example

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FlatButton(
        child: Text('FlatButton'),
        color: Colors.white,
        onPressed: () {
          print("FlatButton tapped");
        },
      ),
    );
  }
}

 

  • App gets started execution from main method. At last, build() method renders FlatButton with the help of MaterialApp.
  • If you do not use the MaterialApp in above code, it could result in No directionality widget found error.
  • I have used white color as FlatButton background using the color property. Otherwise, you could get a black screen with debug banner.
  • Already told you FlatButton text color is black by default

Check it out by removing color: Colors.white line from above code and reload.

FlatButton Properties

Let’s talk about the properties of FlatButton.

flatbutton onpressed example

1. VoidCallback onPressed: It gets called when FlatButton is tapped, You need to pass VoidCallback method, means no arguments and no return value.


For ex: void myFunction();

If you haven’t provided onPressed property or specified null value, then the button will look like in the first one from the above image.

If you have given a method name or anonymous function then the button will look like in the second one.

Okay. How to provide values to onPressed property.

  1. Using anonymous function

  2. 
    FlatButton(  
                onPressed: () {
               //implement your code.
    },
               .....
     ),
    
    
  3. Using function name

  4. void flatButtonTapped(){
      
    }
    
    FlatButton(onPressed: flatButtonTapped,
    
    )
    
    

    You don’t need to give parentheses ‘()’ here. Only the function name. Download all source code from the top link.

    2. VoidCallback onLongPress
    This property gets called when a long tap occurs. Just like onPressed property, pass an anonymous function or method name.

    
    FlatButton(onLongPress: (){},
    
    

    3. ValueChanged onHighlightChanged
    flatbutton highlight changed
    onHighlightChanged calls when you click down or up the button. When the button clicks down, it gives true value. false when button clicks up.

    
    FlatButton(
                child: Text('FlatButton'),
                onHighlightChanged: (value) {
                  print('onHighlightChanged value : $value');
                },
                onPressed: () {
                  //onpressed gets called when the button is tapped.
                },
              ),
    

    4. ButtonTextTheme textTheme

    It control the button’s text color based on the theme. There are 3 values

    1. ButtonTextTheme.Normal
    2. ButtonTextTheme.accent
    3. ButtonTextTheme.primary

    you can use like this

    
    textTheme: ButtonTextTheme.normal.
    
    

    It shows color based on your theme and swatch.

    5. Color textColor

    flatbutton textcolor example

    It determines button label’s or text color.

    
    FlatButton(
                onPressed: () {},
                child: Text("Login"),
                textColor: Colors.indigo,
              ),

    6. Color disabledTextColor

    flatbutton disabled text color example

    The color is used to display when the button is disabled. set null to onPressed.

    
    FlatButton(
                    child: Text('Flat Button - Default Disabled Text Color'),
                    onPressed: null,
                  ),
                  FlatButton(
                    child: Text('Flat Button - Custom Disabled Text Color'),
                    onPressed: null,
                    disabledTextColor: Colors.black54,
                  ),

    7. Color highlightColor

    Highlight property uses to highlight the button when it pressed. After the tap event, highlightColor spreads to fill the whole button and fade out.

    flatbutton high light color

    
    FlatButton(
              padding: EdgeInsets.all(80),
              highlightColor: Colors.redAccent,
              child: Text('FlatButton - highlight Color'),
               onPressed: () {
                //onpressed gets called when the button is tapped.
                print("FlatButton tapped");
              },
            ),
    

    8. Color splashColor

    When the button tapped, splashColor or tap event behaves as something falls into the liquid.

    splash color example

    
    FlatButton(
                       child: Text('Button'),
                       onPressed: (){},
                       splashColor: Colors.red,
            )
    

    9. Brightness colorBrightness

    flatbutton brightness example

    It’s used to increase the readability of text in Button. Use Brightness.light for light and Brightness.dark for dark background color.

    
    FlatButton(
                    child: Text('FlatButton - Brightness.light'),
                    colorBrightness: Brightness.light,
                    color: Colors.limeAccent,
                    onPressed: () {
                      //onpressed gets called when the button is tapped.
                      print("flat button tapped");
                    },
                  ),
                  FlatButton(
                    child: Text('FlatButton - Brightness.dark'),
                    colorBrightness: Brightness.dark,
                    color: Colors.deepPurple,
                    onPressed: () {
                      //onpressed gets called when the button is tapped.
                      print("flat button tapped");

    10. EdgeInsetsGeometry padding
    padding property helps us to specify the padding of FlatButton internal child. Here internal child is Text widget.

    
    FlatButton(
                    child: Text('FlatButton'),
                    onPressed: () {},
                    padding: EdgeInsets.all(50),
                    color: Color(0xFFFFD8C8),
                  ),
    • EdgeInsets.all() – Give enough padding to all sides of button’s text. Above code will apply 50 padding for all sides of the Text(Top, Bottom, Left and Right).

    • EdgeInsets.only() – It gives padding to the only specified side. You can specify one or more sides like below.

    flutter padding - EdgeInsets.only(top,left, right)

    
      FlatButton(
                    child: Text('FlatButton'),
                    onPressed: () {},
                    color: Color(0xFFFC6453),
                    padding: EdgeInsets.only(top: 10, left: 30, right: 20),
                  ),
    

    • EdgeInsets.symmetric() – You can provide values in horizontal and vertical directions.
    
      FlatButton(
                    child: Text('FlatButton'),
                    onPressed: () {},
                    color: Color(0xFF534858),
                    colorBrightness: Brightness.dark,
                    padding: EdgeInsets.symmetric(horizontal: 50),
                  ),
    
                  FlatButton(
                    child: Text('FlatButton'),
                    onPressed: () {},
                    color: Color(0xFF534858),
                    colorBrightness: Brightness.dark,
                    padding: EdgeInsets.symmetric(vertical: 50),
                  ),
                  Padding(
                    padding: EdgeInsets.all(10),
                  ),
                  FlatButton(
                    child: Text('FlatButton'),
                    onPressed: () {},
                    color: Color(0xFF534858),
                    colorBrightness: Brightness.dark,
                    padding: EdgeInsets.symmetric(horizontal: 50, vertical: 30),
                  ),
    
    

    11. ShapeBorder shape

    Shape property gives different options to make different shapes of flatbutton. Let’s make a rectangle FlatButton using shape property with the help of Border.all().

    flatbutton border all shape

    FlatButton(onPressed: (){}, child: Text('OK'),
              shape: Border.all(width: 2.0, color: Colors.pink),),
    
    
    • Border width is 2.0 and color is pink.

    StadiumBorder shape

    
     FlatButton(
                    onPressed: () {},
                    child: Text('StadiumBorder'),
                    shape: StadiumBorder(),
                    color: Colors.pink,
                    textColor: Colors.white,
                  ),
    

    CircleBorder

    FlatButton(
                    onPressed: () {},
                    child: Text('OK'),
                    shape: CircleBorder(),
                    color: Colors.pink,
                    textColor: Colors.white,)
    
    

    CircleBorder with Side

    
     FlatButton(
                    onPressed: () {},
                    child: Text('OK'),
                    shape: CircleBorder(
                      side: BorderSide(
                        color: Colors.pink,
                      ),
                    ),
                  )
    

    Rounded Rectangle Border

    FlatButton(
                    child: Text('Rounded Rectangle Border'),
                    onPressed: () {},
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(15)),
                    color: Colors.pink,
                    textColor: Colors.white,
                  )
    

    Beveled Rectangle Border

    FlatButton(
                    onPressed: () {},
                    child: Text('Beveled Rectangle Border'),
                    shape: BeveledRectangleBorder(
                      borderRadius: BorderRadius.circular(12),
                    ),
                    color: Colors.pink,
                    textColor: Colors.white,
                  ),

    Outline Input Border

    FlatButton(
                    onPressed: () {},
                    child: Text('Outline Input Border'),
                    shape: OutlineInputBorder(),
                    color: Colors.pink,
                    textColor: Colors.white,
                  ),

    YOu can create underline using shape.

    Underline Input Border

    flatbutton underline input border

     FlatButton(
                    onPressed: () {},
                    child: Text('Underline Input Border'),
                    shape: UnderlineInputBorder(),
                    color: Colors.pink,
                    textColor: Colors.white,
                  ),

    FlatButton.Icon Example

    FlatButton.Icon Example
    Let’s create the Icon button using FlatButton.Icon

    
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'FlatButton Icon Ex',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: Scaffold(
            appBar: AppBar(title: Text('FlatButton Icon Example'),
            centerTitle: true,),//it makes appbar title to center
            body: Center(
              child: FlatButton.icon(
                icon: Icon(Icons.add_alarm),//icon image
                label: Text('Add alarm'),//text to show in button
                textColor: Colors.white,//button text and icon color.
                color: Colors.green,//button background color
                onPressed: () {},
              ),
            ),
          ),
        );
      }
    }
    
    • Provided icon and label to FlatButton.icon()

    Flutter FlatButton onPressed Example – Counter Button


    flatbutton onpressed example
    In this example, you will learn how to change count using Flutter FlatButton. Final output will be like above image. Okay, Let’s start.

    
    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State {
      int counter = 0;
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text('FlatButton onPressed Example'),
            ),
            body: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Center(
                  child: Text(
                    '$counter',
                    style: TextStyle(fontSize: 60.0),
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                FlatButton(
                  child: Text('CHANGE COUNT'),
                  onPressed: (){
                    setState(() {
                      counter = counter + 1;
                    });
                  },
               color: Colors.red,
                  textColor: Colors.white,
                ),
              ],
            ),
          ),
        );
      }
    }
    
    
    
    • Application starts execution from main() function.
    • The build() function builds user interface.
    • when we tap on the button, it increases counter variable by 1 and also calls setState().
    • The setState() function calls build() method again.

    Assume you liked this post, please share it with your family and friends.