Flutter Button Developer Guide

main.dart

// To learn more visit - https://blog.akshatapp.com/2019/11/flutter-button-guide.html 
// Demo code for - FlatButton, RaisedButton, IconButton, FloatingActionButton, ButtonBar, DropdownButton & PopupMenuButton

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Button Demo App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

// 1.FlatButton - Demo

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Button Demo Home Page'),
      ),
      body: Center(
        child: FlatButton(
          child: Text('Flat Button'),
          color: Colors.indigo,
          splashColor: Colors.red,
          highlightColor: Colors.green,
          textColor: Colors.white,
          disabledColor: Colors.grey,
          disabledTextColor: Colors.black,
          onPressed: () {
            //code
            print('Flat Button Pressed !');
          },
        ),
      ),
    );
  }
}

// 2.FlatButton icon constructor

/* class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Button Demo Home Page'),
      ),
      body: Center(
        child: FlatButton.icon(
          icon: Icon(
            Icons.info,
            color: Colors.blue,
          ),
          label: Text('Icon Flat Button'),
          color: Color(0xFFC0C0C0),
          onPressed: () {
            //code
            print('Info Icon Flat Button Pressed !');
          },
        ),
      ),
    );
  }
} */

// 3.RaisedButton - Demo

/* class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Button Demo Home Page'),
      ),
      body: Center(
          child: RaisedButton(
        child: Text('Raised Button'),
        color: Colors.indigo,
        splashColor: Colors.red,
        highlightColor: Colors.green,
        textColor: Colors.white,
        disabledColor: Colors.grey,
        disabledTextColor: Colors.black,
        onPressed: () {
          //code
          print('Raised Button is Pressed !');
        },
      )),
    );
  }
} */

// 4.RaisedButton icon constructor

/* class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Button Demo Home Page'),
      ),
      body: Center(
          child: RaisedButton.icon(
        icon: Icon(
          Icons.info,
          color: Colors.blue,
        ),
        label: Text('Icon Raised Button'),
        color: Color(0xFFC0C0C0),
        onPressed: () {
          //code
          print('Info Icon Raised Button is Pressed !');
        },
      )),
    );
  }
} */

// 5.IconButton - Demo

/* class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Button Demo Home Page'),
      ),
      body: Center(
          child: IconButton(
        icon: Icon(
          Icons.volume_up,
          size: 50.0,
        ),
        color: Colors.indigo,
        splashColor: Colors.red,
        highlightColor: Colors.green,
        disabledColor: Colors.grey,
        focusColor: Colors.orange,
        onPressed: () {
          //code
          print('Volume Up Button is Pressed ! Increase Volumne by 10 % ');
        },
      )),
    );
  }
} */

// 6.FloatingActionButton - Demo

/* class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Flutter Button Demo Home Page'),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          tooltip: 'Create or Add',
          backgroundColor: Colors.blue[900],
          splashColor: Colors.green,
          focusColor: Colors.red,
          onPressed: () {
            //code
            print('floating Action Button is Pressed ! ');
          },
        ));
  }
} */

// 7.FloatingActionButton extended

/* class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Flutter Button Demo Home Page'),
        ),
        floatingActionButton: FloatingActionButton.extended(
          label: Text('I Accept'),
          icon: Icon(Icons.check),
          backgroundColor: Colors.indigo,
          onPressed: () {
            //code
            print('FloatingActionButton.extended Button is Pressed ! ');
          },
        ));
  }
} */

// 8.ButtonBar - Demo

/* class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Button Demo Home Page'),
      ),
      body: Center(
        child: ButtonBar(
          alignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            RaisedButton(
              child: Text('Raised Button'),
              color: Colors.indigo,
              splashColor: Colors.red,
              highlightColor: Colors.green,
              textColor: Colors.white,
              disabledColor: Colors.grey,
              disabledTextColor: Colors.black,
              onPressed: () {
                //code
                print('Raised Button is Pressed !');
              },
            ),
            FlatButton(
              child: Text('Flat Button'),
              color: Colors.indigo,
              splashColor: Colors.red,
              highlightColor: Colors.green,
              textColor: Colors.white,
              disabledColor: Colors.grey,
              disabledTextColor: Colors.black,
              onPressed: () {
                //code
                print('Flat Button Pressed !');
              },
            ),
            IconButton(
              icon: Icon(
                Icons.volume_up,
                size: 30.0,
              ),
              color: Colors.indigo,
              splashColor: Colors.red,
              highlightColor: Colors.green,
              disabledColor: Colors.grey,
              focusColor: Colors.orange,
              onPressed: () {
                //code
                print(
                    'Volume Up Button is Pressed ! Increase Volumne by 10 % ');
              },
            ),
          ],
        ),
      ),
    );
  }
} */

// 9.DropdownButton - Demo [Use Stateful Widget]

/* class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Button Demo Home Page'),
      ),
      body: Center(child: DropDown()),
    );
  }
}

class DropDown extends StatefulWidget {
  @override
  _DropDownState createState() => _DropDownState();
}

class _DropDownState extends State<DropDown> {
  List<String> _items = ['item1', 'item2', 'item3', 'item4', 'item5'];

  String _currentItem = 'item1';

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      items: _items.map((String dropDownItem) {
        return DropdownMenuItem<String>(
          value: dropDownItem,
          child: Text(dropDownItem),
        );
      }).toList(),

      onChanged: (String selectedItem) {
        setState(() {
          this._currentItem = selectedItem;
          print('itemSelected : $_currentItem');
        });
      },

      value: _currentItem,

      //Properties

      icon: Icon(Icons.arrow_drop_down_circle),
      iconEnabledColor: Colors.blue,
      iconDisabledColor: Colors.grey,
    );
  }
} */

// 10.PopupMenuButton - Demo [Use Stateful Widget]

/* class MyHomePage extends StatelessWidget {
  final List<String> _options = ['option1', 'option2', 'option3'];

  void optionSelectedFunction(String optionSelected) {
    if (optionSelected == _options[0]) {
      print('option 1 selected');
    }
    if (optionSelected == _options[1]) {
      print('option 2 selected');
    }
    if (optionSelected == _options[2]) {
      print('option 3 selected');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Button Demo Home Page'),
        actions: <Widget>[
          PopupMenuButton<String>(
            itemBuilder: (BuildContext context) =>
                _options.map((String option) {
              return PopupMenuItem(
                child: Text(option),
                value: option,
              );
            }).toList(),

            onSelected: (String optionSelected) {
              optionSelectedFunction(optionSelected);
            },

            //properties

            tooltip: 'Popup Menu Button',
            onCanceled: () {
              print('user dismissed popup menu without selecting any option');
            },

            icon: Icon(Icons.settings),
          )
        ],
      ),
    );
  }
} */