Flutter Change Text Style Programmatically on Button Click

Flutter supports dynamically UI updating feature using State. We will update text style using Boolean state variable in this tutorial. What we are going to do is we will declare a Boolean variable initialize with True value. Now on the Button click we will call a function and change Boolean variable value to False. On this event we are calling Style on Text using Ternary operator. So when it's value is True it will execute first part and if the Boolean value is False it will execute the second part. Eventually this will lead us to updating style sheet on app run dynamically.

Flutter Change Text Style Programmatically on Button Click:

1. Defining a Boolean variable with initial True value.

bool styleControl = true;

2. Defining 2 Text style sheet.

 static const TextStyle style1 = TextStyle(
    color: Colors.brown,
    fontSize: 24,
  );

  static const TextStyle style2 =
      TextStyle(color: Colors.black, fontSize: 35, fontWeight: FontWeight.bold);

3. Defining a function. In this function we are changing Boolean variable value with State.

 void updateStyle() {
    setState(() {
      styleControl = false;
    });
  }

4. Creating Text widget and pass both styles using Ternary operator.

   Text(
            "Sample Text One",
            style: styleControl ? style1 : style2,
          ),

5. Creating Button and calling updateStyle() function on button onPress event.

  ElevatedButton(
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.cyan,
              textStyle: const TextStyle(fontSize: 18),
            ),
            onPressed: updateStyle,
            child: const Text('Change Text Style'),
          ),

Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: Scaffold(body: Center(child: Styles())));
  }
}

class Styles extends StatefulWidget {
  const Styles({super.key});
  @override
  StylesState createState() => StylesState();
}

class StylesState extends State < Styles > {
class StylesState extends State < Styles > {
  bool styleControl = true;
  static const TextStyle style1 = TextStyle(
    color: Colors.brown,
    fontSize: 24,
  );

  static const TextStyle style2 =
      TextStyle(color: Colors.black, fontSize: 35, fontWeight: FontWeight.bold);

  void updateStyle() {
    setState(() {
      styleControl = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: < Widget > [
          Text(
            "Sample Text One",
            style: styleControl ? style1 : style2,
          ),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.cyan,
              textStyle: const TextStyle(fontSize: 18),
            ),
            onPressed: updateStyle,
            child: const Text('Change Text Style'),
          ),
        ]))));
  }
}

Screenshots: