A Complete Guide To Flutter Buttons with 5 Examples

In this article, I’m going to explain various button types in Flutter, also you’ll learn how to change the design, colors, the layout of those buttons.

we’re going to learn about,

ElevatedButton
OutlinedButton
TextButton
IconButton
FloatingActionButton

How to display ElevatedButton?


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AppMaking.co"),
        centerTitle: true,
        backgroundColor: Colors.blue[900],
      ),
      body: Center(
        child: ElevatedButton(
          child: Text("Tap on this"),
          style: ElevatedButton.styleFrom(
            primary: Colors.red,
            elevation: 0,
          ),
          onPressed: () {},
        ),
      ),
    );
  }

In the above example, we’ve displayed an ElevatedButton(), also we’ve modified the style of that buttons such as color, elevation(shadow). The output looks like this

Flutter OutlinedButton Example


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AppMaking.co"),
        centerTitle: true,
        backgroundColor: Colors.blue[900],
      ),
      body: Center(
        child: OutlinedButton(
          child: Text("Tap on this"),
          style: OutlinedButton.styleFrom(
            primary: Colors.red,
            side: BorderSide(
              color: Colors.red,
            ),
          ),
          onPressed: () {},
        ),
      ),
    );
  }

In the above example, we’ve displayed an OutlinedButton(), also we’ve modified the style of that buttons such as color & border. The output looks like this

Flutter TextButton Example


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AppMaking.co"),
        centerTitle: true,
        backgroundColor: Colors.blue[900],
      ),
      body: Center(
        child: TextButton(
          child: Text("Tap on this"),
          style: TextButton.styleFrom(
            primary: Colors.blue,
          ),
          onPressed: () {},
        ),
      ),
    );
  }

In the above example, we’ve displayed a TextButton(), also we’ve modified the style of that buttons such as color. The output looks like this

Flutter IconButton Example


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AppMaking.co"),
        centerTitle: true,
        backgroundColor: Colors.blue[900],
      ),
      body: Center(
        child: IconButton(
          icon: Icon(Icons.favorite),
          iconSize: 40,
          color: Colors.red,
          onPressed: () {},
        ),
      ),
    );
  }

In the above example, we’ve displayed an IconButton(), also we’ve modified the style of that buttons such as color & size. The output looks like this

flutter-icon-button

Flutter Floating Action Button Example


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AppMaking.co"),
        centerTitle: true,
        backgroundColor: Colors.blue[900],
      ),
      body: Container(),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.green,
        child: Icon(Icons.add),
        onPressed: () {},
      ),
    );
  }

FloatingActionButton (FAB) is a property of Scaffold(). In the above example, we’ve displayed a FloatingActionButton, also we’ve modified the style of that buttons such as color and position of the FAB. The output looks like this

Documentation: