Flutter supports run time UI(User Interface) updating technique using State. If we update any variable value using normal assign format then the UI did not update automatically. But using State updating method we can Change Text Font Color Size Style on Button Click in Flutter Dart Android iOS App. In this tutorial we would use Ternary operator to manage the Style value. Ternary operator supports 2 operands. If the given value is True then it will execute the First part and if the given value is False then it will execute the Second part. So let’s get started 🙂 .
Contents in this project Change Text Font Color Size Style on Button Click in Flutter Dart Update UI in Android iOS Example:
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 Parent class MyApp here.
|
1 |
void main() => runApp(MyApp()); |
3. Create MyApp class extends with State less widget. We would call here the UpdateStyle() class.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: UpdateStyle() ) ) ); } } |
4. Create a class named as UpdateStyle extends with StatefulWidget. Here we would create the createState() method and pass our children class in which we would use State.
|
1 2 3 4 5 |
class UpdateStyle extends StatefulWidget { UpdateStyleState createState() => UpdateStyleState(); } |
5. Create our main children class named as UpdateStyleState extends State.
|
1 2 3 4 |
class UpdateStyleState extends State { } |
6. Create a Boolean variable named as styleOBJ with default True value. We would use this variable with Ternary operator to manage Style values.
|
1 |
bool styleOBJ = true; |
7. Create a function named as changeStyle(). In this method we would update the Boolean variable value using State method.
|
1 2 3 4 5 6 |
changeStyle(){ setState(() { styleOBJ = false ; }); } |
8. Creating 1 Text widget with Ternary operator with 2 Different styles and 1 Raised Button widget in Widget build area in UpdateStyleState class.
|
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 |
Widget build(BuildContext context) { return Scaffold( body: Center(child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( padding: EdgeInsets.fromLTRB(0, 10, 0, 10), child: Text('Update Text Style on Button Click', style: styleOBJ ? TextStyle(color: Colors.black, fontSize: 18) : TextStyle(color:Colors.green, fontSize: 22),) ), RaisedButton( onPressed: () => changeStyle(), child: Text('Click Here To Change Text Style on Button Click'), textColor: Colors.white, color: Colors.red, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ) ])) ); } |
See the Below screenshot to understand how Ternary operator works:
|
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 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: UpdateStyle() ) ) ); } } class UpdateStyle extends StatefulWidget { UpdateStyleState createState() => UpdateStyleState(); } class UpdateStyleState extends State { bool styleOBJ = true; changeStyle(){ setState(() { styleOBJ = false ; }); } @override Widget build(BuildContext context) { return Scaffold( body: Center(child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( padding: EdgeInsets.fromLTRB(0, 10, 0, 10), child: Text('Update Text Style on Button Click', style: styleOBJ ? TextStyle(color: Colors.black, fontSize: 18) : TextStyle(color:Colors.green, fontSize: 22),) ), RaisedButton( onPressed: () => changeStyle(), child: Text('Click Here To Change Text Style on Button Click'), textColor: Colors.white, color: Colors.red, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ) ])) ); } } |
Screenshots:
