Dynamic styling is very popular among mobile developers because we can change look of app at run-time. In current tutorial we are using State and Ternary operator combination to Flutter Load Different Style on Container Widget on Button Click. The ternary operator supports 3 arguments and using the combination of both of them we can easily update style at application runtime of Container widget or any other widget. In this tutorial we would change the style of Container view widget on button click and make container widget height and width increase and also change the color of Container widget.
Contents in this project Flutter Load Different Style on Container Widget on Button Click 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 we would call our main MyApp class here.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main Root widget class named as MyApp extends with State less widget. In this class we would call UpdateUI() class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: UpdateUI() ) ) ); } } |
4. Create a class named as UpdateUI extends StatefulWidget. In this class we would createState() method and pass the Child View class UpdateUIState here. Using this method we would enable the state in given class root tree.
|
1 2 3 4 5 |
class UpdateUI extends StatefulWidget { UpdateUIState createState() => UpdateUIState(); } |
5. Create our main Child class named as UpdateUIState extends with State.
|
1 2 3 4 |
class UpdateUIState extends State<UpdateUI> { } |
6. Create a Boolean variable named as viewObject and set its default value as True. We would use this variable with Ternary operator to change style at app runtime.
|
1 |
bool viewObject = true; |
7. Create a function named as changeStyle(). In this function we would update the viewObject value as False.
|
1 2 3 4 5 6 |
changeStyle(){ setState(() { viewObject = false ; }); } |
8. Creating Widget Build area in UpdateUIState class. Now we would make Scaffold widget -> Center widget -> Column widget here.
|
1 2 3 4 5 6 7 8 9 |
Widget build(BuildContext context) { return Scaffold( body: Center(child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ ])) ); } |
9. Create 1 Container Widget and 1 Raised Button widget in Column widget.
How Ternary operator works :
Ternary operator would support 3 arguments. If first argument value is True then it would run the 2nd argument and return us the 2nd value. If the first value is False then it would run the 3rd argument and returns us the 3rd passed value. For better understanding read my this tutorial.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Container( width: viewObject ? 200 : 240, height: viewObject ? 200 : 240, margin: EdgeInsets.all(20), color: viewObject ? Colors.purple : Colors.lightBlue, padding: EdgeInsets.fromLTRB(0, 10, 0, 10), child: Center(child: Text('Updating Container View Widget Style on Button Click', style: TextStyle(fontSize: 22, color: Colors.white), textAlign: TextAlign.center,) )), RaisedButton( onPressed: () => changeStyle(), child: Text('Click Here To Change Container Widget View Style on Button Click', textAlign: TextAlign.center,), textColor: Colors.white, color: Colors.red, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ) |
10. 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( body: Center( child: UpdateUI() ) ) ); } } class UpdateUI extends StatefulWidget { UpdateUIState createState() => UpdateUIState(); } class UpdateUIState extends State<UpdateUI> { bool viewObject = true; changeStyle(){ setState(() { viewObject = false ; }); } @override Widget build(BuildContext context) { return Scaffold( body: Center(child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( width: viewObject ? 200 : 240, height: viewObject ? 200 : 240, margin: EdgeInsets.all(20), color: viewObject ? Colors.purple : Colors.lightBlue, padding: EdgeInsets.fromLTRB(0, 10, 0, 10), child: Center(child: Text('Updating Container View Widget Style on Button Click', style: TextStyle(fontSize: 22, color: Colors.white), textAlign: TextAlign.center,) )), RaisedButton( onPressed: () => changeStyle(), child: Text('Click Here To Change Container Widget View Style on Button Click', textAlign: TextAlign.center,), textColor: Colors.white, color: Colors.red, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ) ])) ); } } |
Screenshots:
