Flutter Fix
No Result
View All Result
  • Login
  • Register
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
FORUM
ASK QUESTION
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
No Result
View All Result
Flutter Fix
No Result
View All Result
Home Flutter Widgets

All Flutter Buttons – [RaisedButton, FlatButton, IconButton, FloatingActionButton, Dismissible]

July 27, 2020
in Flutter Widgets
5 min read
flutter buttons, materialbutton, flatbutton, cupertinobutton, dismissible, iconbutton

You’ll get to understand the concept of all buttons in Flutter, as it would make you know when and the right time to use a particular type of Flutter Button Widget.

RELATED FLUTTER RESOURCES

Understanding The Flutter ListView Widget

How To Build A Code Editor App In Flutter with code_editor Plugin

Flutter Form & FormField Widget – Implementation & Example

Some gestures are super easy because they’re pre-baked into certain widgets. For instance, the creators of button widgets know their sole purpose in life is to be pressed and then to do something in response to it. So all buttons come with a property called onPressed. To use it, you’ll simply point it to a function to run when the user presses it:

ADVERTISEMENT
Product _product;
// More code here
  Widget foo() {
  return IconButton(
  icon: Icon(Icons.delete),
  onPressed: removeProduct // The callback must return void
  );
}
// More code here
void removeProduct() {
// Do something to remove the _product
}
An IcnoButton

You could think of a Button as the base class for all of the other buttons. It isn’t really, but it wouldn’t hurt for you to think of all of the others as a Button with some specialties. For instance, these are all widgets that are specialized types of buttons, Check out the Flutter Button Family below;

The Flutter Button Family

1. Raised Button

This one is simply a Button but appears like it’s floating above the page. It has an elevation property to increase the simulated altitude above the page;

RaisedButton(
  child: Text(text: "Go"),
  onPressed: () => print("You swiped the raised button");
  elevation: 5.0
)
Flutter Button Elevation

2. FlatButton

These are kind of the anti-RaisedButton. They just appear completely flat. They are subtle, having simple text that don’t scream to be pressed, like an UNDO button or BACK button. Here’s an example below;

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.orange,
      ),
      debugShowCheckedModeBanner: false,
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Flat Button")
      ),
      
      body: Center(
        child: FlatButton(
          color: Colors.blue,
          textColor: Colors.white,
          child: Text("Go To FlutterFix.com"),
          onPressed: (){
            _doSomething();
          }
        ),
      ),
    );
  }
  
  _doSomething(){
    print("Button Clicked");
  }
}

3. IconButton

The IconButton is similar to the FlatButton, but then, It takes an Icon as its child and requires an onPressed also which makes it clickable. Here’s an example;

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.orange,
      ),
      debugShowCheckedModeBanner: false,
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Icon Button"),
      ),
      
      body: Center(
        child: IconButton(
        icon: Icon(Icons.add, color: Colors.white),
        onPressed: (){
            _doSomething();
          },
          color: Colors.orange
        ),
      ),
    );
  }
  
  _doSomething(){
    print("Button Clicked");
  }
}

4. CupertinoButton

An iOS-style button. Looks great on iPhones, but it is kind of strange to have an iOS feel on an Android device. If you use it, you must remember to add this to the top of your dart file:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.amber,
      ),
      debugShowCheckedModeBanner: false,
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Cupertino Button")
      ),
      
      body: Center(
        child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              CupertinoButton(
                child: Text('FlutterFix Button'),
                onPressed: () { 
                _doSomething();
                },
              ),
              CupertinoButton.filled(
                child: Text('FlutterFix Filled Button'),
                onPressed: () { 
                _doSomething();
                },
              ),
            ],
          )
      ),
    );
  }
  
  _doSomething(){
    print("Button Clicked");
  }
}

5. MaterialButton

So, on like other Button class, The Material button widget gives you more flexibility and options to do a lot of more beautiful design than the normal fixed Button with little flexibility. The Flutter MaterialButton get most of its ability from the Flutter Material Library. here’s an example

import 'package:flutter/material.dart';
void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.amber,
      ),
      debugShowCheckedModeBanner: false,
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Flat Button")
      ),
      
      body: Center(
        child: MaterialButton(
        onPressed: () { 
                _doSomething();
                },
          
          color: Colors.amber,
          elevation: 5.0,
          child: Text("Material Button", style: TextStyle(
          color: Colors.white
          ))
        ),
      ),
    );
  }
  
  _doSomething(){
    print("Button Clicked");
  }
}

So far, we’ve listed the available Buttons available in the Flutter Library, I hope you got to understand Flutter Buttons better?. Aside Buttons, there is an important widget you need to know which is called the Dismissible.

Dismissible widget

Generally, Buttons are all created for one purpose: to respond to a tap. Similarly, a Dismissible is created for one purpose: to respond to a swipe. To use it, you’ll usually build a list of widgets and will wrap each one with a Dismissible. When you do, each widget in the list can then respond to the swipe gesture:

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.amber,
      ),
      debugShowCheckedModeBanner: false,
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Dismissible")
      ),
      
      body: Dismissible(
        key: Key(null),
        // Give it a blue background if swiped right and
        // a red background if swiped left
        background: Container(color: Colors.blue),
        secondaryBackground: Container(color: Colors.red),
        onDismissed: (direction) {
        print("You swiped $direction");
        },
        child: ListTile(
        title: Text("A very important title (FlutterFix.com)", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 19)),
        subtitle: Text("Some text here also")
      ),
)
    );
  }
  
  // _doSomething(){
  //   print("Button Clicked");
  // }
}

RelatedFlutter Resource

fLUTTER ListView builder seperated
Flutter Widgets

Understanding The Flutter ListView Widget

August 3, 2020
Code Editor Package Flutter
Dart

How To Build A Code Editor App In Flutter with code_editor Plugin

August 3, 2020
Flutter Form & FormField Widget - Implementation & Example
Flutter Packages

Flutter Form & FormField Widget – Implementation & Example

July 30, 2020
custom fonts text style flutter
Flutter Widgets

Flutter Custom Fonts and How to Style Text

July 24, 2020
Understanding the Flutter COntainer
Flutter Widgets

Container Widget & Box Model in Flutter – All You Need To Know

July 22, 2020
gridview widget flutter
Flutter Widgets

How to use the Flutter GridView.count, GridView.extent

July 20, 2020
Next Post
Flutter Form & FormField Widget - Implementation & Example

Flutter Form & FormField Widget - Implementation & Example

A Flutter App To Track The Chemistry Chemical Elements

A Flutter App To Track The Chemistry Chemical Elements

Leave a Reply Cancel reply

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

Recommended Stories

A Weather App made with Flutter using OpenWeather API + Source Code

A Weather App made with Flutter using OpenWeather API + Source Code

September 7, 2020
responsive scaffold flutter

How to use the Responsive Scaffold Package

June 25, 2020
A Flutter Plugin That Allows You To Swipe Cards

A Flutter Plugin That Allows You To Swipe Cards

August 8, 2020

Popular Stories

  • FLUTTER-FUTUER-APP-DEVELOPMENT

    Why Google Flutter Is the Future of Mobile App Development

    0 shares
    Share 0 Tweet 0
  • Container Widget & Box Model in Flutter – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Create a Beautiful & Customized Tab/Toggle in Flutter

    0 shares
    Share 0 Tweet 0
  • Flutter Future, Await, and Async – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Flutter Form & FormField Widget – Implementation & Example

    0 shares
    Share 0 Tweet 0
  • HOME
  • ABOUT US
  • CONTACT US
  • DMCA
  • TERMS & CONDITIONS
  • PRIVACY POLICY
Call us: +234 705 505 5426

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

No Result
View All Result
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In