Text widget text can be called dynamically via String variable. Sometimes flutter app developer wants to update the Text on certain event or button onPress event. We could use State update method to Change Text Widget Text Dynamically on Button Click in Flutter Android iOS mobile app. So let’s get started 🙂 .
Contents in this project Change Text Widget Text on Button Click Dynamically in Flutter:
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 call our main Root class MyApp here.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with State less widget. In this class we would call the UpdateText() class in body section of Scaffold widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Change Text Dynamically on Button Click') ), body: Center( child: UpdateText() ) ) ); } } |
4. Create a class named as UpdateText extends StatefulWidget. In this class we would make the createState() method with our child widget class and pass the child widget in which we would make the Text widget will pass here.
|
1 2 3 4 5 |
class UpdateText extends StatefulWidget { UpdateTextState createState() => UpdateTextState(); } |
5. Create a class named as UpdateTextState extends with State.
|
1 2 3 4 |
class UpdateTextState extends State { } |
6. Create a String variable named as textHolder and assign some random default text to it. We would use this variable for showing text.
|
1 |
String textHolder = 'Old Sample Text...!!!'; |
7. Create a function named as changeText(). In this method we would update the String variable textHolder text using State method. We would call this function on button onPress event.
|
1 2 3 4 5 6 7 |
changeText() { setState(() { textHolder = 'New Sample Text...'; }); } |
8. Create a Text widget and 1 Raised Button widget in Widget build area of UpdateTextState class. We would call the function on button click event to update text.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
Widget build(BuildContext context) { return Scaffold( body: Center(child: Column( children: <Widget>[ Container( padding: EdgeInsets.fromLTRB(20, 20, 20, 20), child: Text('$textHolder', style: TextStyle(fontSize: 21))), RaisedButton( onPressed: () => changeText(), child: Text('Click Here To Change Text Widget Text Dynamically'), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), ])) ); } |
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 |
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 Text Dynamically on Button Click') ), body: Center( child: UpdateText() ) ) ); } } class UpdateText extends StatefulWidget { UpdateTextState createState() => UpdateTextState(); } class UpdateTextState extends State { String textHolder = 'Old Sample Text...!!!'; changeText() { setState(() { textHolder = 'New Sample Text...'; }); } @override Widget build(BuildContext context) { return Scaffold( body: Center(child: Column( children: <Widget>[ Container( padding: EdgeInsets.fromLTRB(20, 20, 20, 20), child: Text('$textHolder', style: TextStyle(fontSize: 21))), RaisedButton( onPressed: () => changeText(), child: Text('Click Here To Change Text Widget Text Dynamically'), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), ])) ); } } |
Screenshot:
