Flutter Load Different Style on Container Widget on Button Click

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.

2. Create void main runApp() method and we would call our main MyApp class here.

3. Create our main Root widget class named as MyApp extends with State less widget. In this class we would call UpdateUI() class.

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.

5. Create our main Child class named as UpdateUIState extends with State.

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.

7. Create a function named as changeStyle(). In this function we would update the viewObject value as False.

8. Creating Widget Build area in UpdateUIState class. Now we would make Scaffold widget -> Center widget -> Column widget here.

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.

10. Complete source code for main.dart file:

Screenshots:

Flutter Load Different Style on Container Widget on Button Click

Leave a Reply

Your email address will not be published.