Buttons Widget in Flutter

Most frequently used Widget in Flutter Programming. Button is the Flutter Widget which has onTap event to perform some kind of actions and generate output. For example, Save Form button to save Form information

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: Text("Button Demo")),
        body: Center(
            child: Column(children: [
          SizedBox(height: 10),
          FlatButton(child: Text("Flat Button"), onPressed: () {}),
          SizedBox(height: 10),
          RaisedButton(child: Text("Raised Button"), onPressed: () {}),
          SizedBox(height: 10),
          RaisedButton(
              child: Text("Raised Button with Color"),
              onPressed: () {},
              color: Colors.green),
          SizedBox(height: 10),
          OutlineButton(
            child: new Text("Outlined Button"),
            onPressed: () {},
          ),
          SizedBox(height: 10),
          OutlineButton(
              child: new Text("Outlined Button Custom Border"),
              onPressed: () {},
              shape: new RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(30.0))),
        ])),
      ),
    );
  }
}

Output of the program is :

Flutter provides different kind of Button as you can see in Output Image and here is the list :

  • FlatButton: It’s simple button without borders
  • RaisedButton: Button with background color
  • OutlinedButton: only show Borders in Button

Here we can use Icon with this Button, we can change border radius, background color in Button Widget

Flutter Buttons

Share

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *