Change Text Font Color Size Style on Button Click in Flutter Dart Update UI

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.

2. Create void main runApp() method and call our main Root Parent class MyApp here.

3. Create MyApp class extends with State less widget. We would call here the UpdateStyle() class.

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.

5. Create our main children class named as 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.

7. Create a function named as changeStyle(). In this method we would update the Boolean variable value using State method.

8. Creating 1 Text widget with Ternary operator with 2 Different styles and 1 Raised Button widget in Widget build area in UpdateStyleState class.

See the Below screenshot to understand how Ternary operator works:

9. Complete source code for main.dart file:

Screenshots:

Change Text Font Color Size Style on Button Click in Flutter Dart Update UI

Leave a Reply

Your email address will not be published.