As we all know in flutter every View is controlled by widgets. To create a Button we would use Raised Button widget along with Text widget. We can easily update the Button Text using State in flutter. State is used to update widgets properties in real time and display changes on screen. So in this tutorial we would learn about Flutter Change Button Above Text Dynamically Android iOS Example Tutorial.
Contents in this project Flutter Change Button Above Text Dynamically Android iOS Example Tutorial :
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main class named as MyApp extends with State less widget. This is our main Root View class. In this class in Center widget we are calling CustomButton() widget class. Because we are using State in our current tutorial and State cannot use directly in main class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Change Button Above Text Dynamically') ), body: Center( child: CustomButton() ) ) ); } } |
4. Create a class named as CustomButton(). In this class we would make the createState() method and pass the CustomButtonState class along with it to enable mutable State management.
|
1 2 3 4 5 |
class CustomButton extends StatefulWidget { CustomButtonState createState() => CustomButtonState(); } |
5. Create a class named as CustomButtonState extends State. This is our main Child class in which we are creating Both buttons and updating the button above title text using State.
|
1 2 3 4 5 |
class CustomButtonState extends State<CustomButton> { } |
6. Create a String variable named as buttonText with some default Text. We would use this variable as Button above text.
|
1 |
String buttonText = 'Button OLD Text'; |
7. Create a function named as updateButtonText. In this function we would simply update the String variable value using setState() method of flutter dart.
|
1 2 3 4 5 6 |
updateButtonText(){ setState(() { buttonText = 'Button NEW Text'; }); } |
8. Creating Widget Build Area -> Scaffold widget -> Center widget -> Column widget -> Creating 2 Raised Button widget. We are calling the first Raised button text using String variable.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RaisedButton( onPressed: ()=> print('Clicked'), color: Colors.pinkAccent, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('$buttonText'), ), RaisedButton( onPressed: updateButtonText, color: Colors.green, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Click Here Change Button Above Text'), ), ], ), )); |
9. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Change Button Above Text Dynamically') ), body: Center( child: CustomButton() ) ) ); } } class CustomButton extends StatefulWidget { CustomButtonState createState() => CustomButtonState(); } class CustomButtonState extends State<CustomButton> { String buttonText = 'Button OLD Text'; updateButtonText(){ setState(() { buttonText = 'Button NEW Text'; }); } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RaisedButton( onPressed: ()=> print('Clicked'), color: Colors.pinkAccent, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('$buttonText'), ), RaisedButton( onPressed: updateButtonText, color: Colors.green, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Click Here Change Button Above Text'), ), ], ), )); } } |
Screenshots:
thank so much for your website it assists a great deal.
Welcome 🙂 .