In this blog, I will talk about The New material Button Version 1.22 in a flutter. We will implement a demo of the New material Button in a flutter in your flutter applications. Now let’s start.
Table of Contents :
New Material Buttons Version 1.22
Flutter :
“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single code base in record time ”
New Material Buttons Version 1.22 :
Flutter New material button has come with flutter new version 1.22. While the old buttons still there. It basically involved creating and using custom buttons. While this is not the case with 1.22. Now you can easily set that theme in it. This will apply to all buttons of the type chosen globally.
As you can see a table below. That the buttons and their themes replace the existing ones:
Demo Module :
Code Implement :
- TextButton: The TextButton is a replacement for FlatButton.We are commonly used for dialogs and low pronunciation functions, including those in cards. It does not have visible limitations. This is also the case with the button theme data is sent to the theme we pass these to the property. This is the new property in them data. And one of them is the TextButtonTheme related subject property. This TextButton accepts the theme data. within which we can set the color of the button, etc.
TextButton(
onPressed: () {
print('Pressed TextButton');
_showMessageInScaffold("Text Button!");
},
child: Text('Text Button'),
),
The style of a TextButton can be override with its style parameter. The style of all text buttons in an app can be override with the theme data TextButton end. And to override the background color of the button create a Button Style with the help of TextButtonTheme.The selected button state measure the background color.
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
primary: Colors.orange,
),
),
2.ElevatedButton: Elevated Button is a replacement for RaisedButton which is used as the primary actions in the app. And also we can change the size color of the button globally with the help of ElevatedButtonThemeData: .
ElevatedButton(
onPressed: () {
print('Pressed ElevatedButton');
_showMessageInScaffold("Elevated Button! ");
},
child: Text('Elevated Button'),
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
onPrimary: Colors.white,
primary: Colors.blue,
),
),
3. OutlinedButton: The OutlinedButton is a replacement for OutlineButton. And this is a medium thrust button. They have actions that are important. But they do not perform primarily in any app.
OutlinedButton(
onPressed: () {
_showMessageInScaffold("Outlined Button!");
},
child: Text('Outlined Button'),
),
The style of an OutlinedButton can be override with its style parameter. The style of all text buttons in an app can be override with the theme data OutlinedButton end. And to be override the background color of the button create a Button Style with the help of OutlinedButtonThemeData.The selected button state measure the background color .
outlinedButtonTheme: OutlinedButtonThemeData(
style: OutlinedButton.styleFrom(
primary: Colors.red,
),
),
Code File :
import 'package:flutter/material.dart';
class FlutterNewMaterialButton extends StatefulWidget {
@override
_FlutterNewMaterialButtonState createState() =>
_FlutterNewMaterialButtonState();
}
class _FlutterNewMaterialButtonState extends State<FlutterNewMaterialButton> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
double _height;
double _width;
void _showMessageInScaffold(String message) {
try {
_scaffoldKey.currentState.showSnackBar(SnackBar(
content: Text(message),
action: SnackBarAction(
label: 'Undo',
onPressed: () {
print('Action in Snackbar has been pressed.');
},
),
));
} on Exception catch (e, s) {
print(s);
}
}
@override
Widget build(BuildContext context) {
_height = MediaQuery.of(context).size.height;
_width = MediaQuery.of(context).size.width;
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
backgroundColor: Colors.blue[300],
title: Text('New Material Buttons'),
),
body: SafeArea(
child: Container(
height: _height,
width: _width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: () {
print('Pressed ElevatedButton');
_showMessageInScaffold("Elevated Button! ");
},
child: Text('Elevated Button'),
),
TextButton(
onPressed: () {
print('Pressed TextButton');
_showMessageInScaffold("Text Button!");
},
child: Text('Text Button'),
),
OutlinedButton(
onPressed: () {
_showMessageInScaffold("Outlined Button!");
},
child: Text('Outlined Button'),
),
],
),
),
),
);
}
}
return MaterialApp(
debugShowCheckedModeBanner: false,
// theme: ThemeData(),
initialRoute: '/',
onGenerateRoute: Routes.onGenerateRoute,
theme: ThemeData.from(
colorScheme: ColorScheme.light(),
).copyWith(
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
primary: Colors.orange,
),
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
onPrimary: Colors.white,
primary: Colors.blue,
),
),
outlinedButtonTheme: OutlinedButtonThemeData(
style: OutlinedButton.styleFrom(
primary: Colors.red,
),
),
),
);
Conclusion :
In this article, I have explained a New Material Buttons Version 1.22 demo, you can modify and experiment according to your own, this little introduction was from the New Material Buttons Version 1.22 from our side.
I hope this blog helps will provide you with sufficient information in Trying up the New Material Buttons Version 1.22 in your flutter project. So please try it.
❤ ❤ Thanks for reading this article ❤❤
Feel free to connect with us:
And read more articles from FlutterDevs.com
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
