Mastering FlatButton in Flutter

In Flutter, FlatButton is typically used to display buttons that link to the application’s auxiliary features, such as viewing all of the files in the Gallery, launching the Camera, setting permissions, etc.

FlatButton has lost value. Please switch to TextButton.

In contrast to Raised Button, FlatButton lacks an elevation. Additionally, the button’s default colour is black with no colour for the text.

But you may use textColor and colour, respectively, to give the text and button colour.

The FlatButton widget in Flutter is a flexible element that enables you to design interactive and aesthetically pleasing buttons for the user interface of your app.

You may create buttons with adaptable attributes for different screen sizes and devices. In-depth discussion of the FlatButton widget and a step-by-step demonstration of how to add and style buttons to your Flutter applications are provided in this blog post.

Ensure you have Flutter installed on your machine. If not, follow the official installation guide. Create a new Flutter project.

Implement the FlatButton Widget

Inside the lib/main.dart file, replace the existing code with the following example:

import 'package:flutter/material.dart';

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

class FlatButtonApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlatButton Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FlatButtonExample(),
    );
  }
}

class FlatButtonExample extends StatelessWidget {
  void _onButtonPressed() {
    print('Button Pressed!');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FlatButton Widget'),
      ),
      body: Center(
        child: FlatButton(
          onPressed: _onButtonPressed,
          child: Text('Click Me!'),
        ),
      ),
    );
  }
}

Upon running the application, you will see a simple user interface with an AppBar and a centered FlatButton displaying the text “Click Me!”.

Explanation

In the code above, we create a new Flutter application named FlatButtonApp. Inside the FlatButtonExample widget, we use the FlatButton widget to create a button with the label “Click Me!”.

By providing an onPressed callback, we define the action to be executed when the user taps the button. In this example, the _onButtonPressed function simply prints “Button Pressed!” to the console.

Conclusion

The FlatButton widget in Flutter is a powerful tool for creating beautiful and responsive buttons in your app. By following the example provided in this blog post, you can easily incorporate flat-style buttons into your Flutter projects.

Experiment with different properties of the FlatButton widget, such as adjusting button colors, text styles, or adding icons, to create buttons that perfectly match your app’s design.

Unlock the potential of the FlatButton widget and elevate your user interface with visually stunning and interactive buttons in your Flutter applications.

Happy coding, and enjoy crafting captivating buttons for your Flutter app!

Related Posts

ElevatedButton Tutorial for Flutter

Numeric String Validation in Flutter

Border of Container Widget in Flutter

Flutter Column Explained – Tutorial

Flutter Progress Indicators Tutorial

Flutter Center Widget Tutorial