Scribd
Upload
63 views

Flutter Flatbutton

The document discusses the FlatButton widget in Flutter. FlatButton is used for secondary app functions like opening cameras or changing permissions. Unlike RaisedButton, it does not have an elevation or default color. The onPressed callback runs when tapped. The example app displays a default and styled FlatButton, changing the text and button colors.

Uploaded by

Hamza Ouederni
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
63 views

Flutter Flatbutton

The document discusses the FlatButton widget in Flutter. FlatButton is used for secondary app functions like opening cameras or changing permissions. Unlike RaisedButton, it does not have an elevation or default color. The onPressed callback runs when tapped. The example app displays a default and styled FlatButton, changing the text and button colors.

Uploaded by

Hamza Ouederni
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Flutter FlatButton Example

Flutter FlatButton

In Flutter, FlatButton is usually used to display buttons that lead to secondary functionalities of the application
like viewing all files of Gallery, opening Camera, changing permissions etc.

FlatButton does not have an elevation unlike Raised Button. Also, by default, there is no color to the button and
text is black.

But you may provide color to the text and button using textColor and color respectively.

You can access the callback function onPressed() when the FlatButton is pressed.

Example – Flutter FlatButton

In this example Flutter application, we have displayed a default FlatButton and then with some styling like text
color and button color.

main.dart

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatefulWidget {


@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {


@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter FlatButton - tutorialkart.com'),
),
body: Center(child: Column(children: <Widget>[
Container(
margin: EdgeInsets.all(20),
child: FlatButton(
child: Text('Login'),
child: Text('Login'),
onPressed: () {},
),
),
Container(
margin: EdgeInsets.all(20),
child: FlatButton(
child: Text('Login'),
color: Colors.blueAccent,
textColor: Colors.white,
onPressed: () {},
),
),
]))),
);
}
}

When you run this application, you should see UI as shown below.

If you do not provide onPressed() function for FlatButton, the button is displayed as a disabled button.

In the following GIF, you could observe the behavior of FlatButton when pressed.
Conclusion

In this Flutter Tutorial, we learned how to use FlatButton and how to change some of its properties.

Flutter Tutorial

✦ Flutter Tutorial

✦ Flutter - Install on Linux - Ubuntu

✦ Flutter - Basic Application Example

Flutter Widgets

✦ Flutter Text

✦ Flutter TextField

➩ Flutter FlatButton

✦ Flutter RaisedButton

✦ Flutter SnackBar

✦ Flutter Switch

✦ Flutter ToggleButtons

✦ Flutter Table

✦ Flutter DataTable
✦ Flutter Tooltip

✦ Flutter TabBar & TabBarView

Flutter Animation

✦ Flutter Animation Basic Example

✦ Flutter Animate Color

Flutter Packages

✦ Flutter sqflite - SQLite Tutorial

Flutter Examples

✦ Flutter Login Screen Sample

You might also like