Flutter Question posted in
The official Flutter documentation can be found here.

Flutter: How to change the text size of the dialog box

shThe problem is when changing the text size of the dialog box, it does not change, but if it is outside the dialog box, the text size changes without problems, which I only want when the user selects on the box, the text size changes immediately or automatically, and thank you

Picture dialog box with checkbox
٢
enter image description here

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.

        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
double textSize = 14;
bool _cesbox = false;

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(

        backgroundColor: Theme.of(context).colorScheme.inversePrimary,

        title: Text(widget.title),
      ),
      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[

             Text(
              'Fluttern',style:TextStyle(fontSize: textSize),
            ),
          
              Text("Click on the box to enlarge the textn"),
              Checkbox(

                value: _cesbox,
               onChanged: (newbool){

             setState(() {
                      _cesbox=newbool!;
                     if (_cesbox==true) {

                            textSize=40;

                           }

                             });
                                  }

                              ),

            IconButton(onPressed: (){
              showDialog(
                  context: context,

                  builder: (BuildContext context) {
                    return AlertDialog(

                      content: StatefulBuilder(
                        builder: (BuildContext context, StateSetter setState) {
                          return Column(
                            children: [

                              Text("Click on the box to enlarge the text"),
                              Checkbox(

                                  value: _cesbox,
                                  onChanged: (newbool){

                                    setState(() {
                                      _cesbox=newbool!;
                                      if (_cesbox==true) {

                                        textSize=40;

                                      }

                                    });
                                  }

                              ),

                            ],
                          ) ;


                        },

                      ) ,

                    )  ;
                  }

              );

            }
                ,
                icon: const Icon(Icons.menu,size: 25,color: Color.fromARGB(255, 51, 50, 50),)),


          ],
        ),
      ),

    );
  }
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    In short, I want to change the text size by entering the dialog box and changing the text size immediately or automatically


  2. 0

    You can do that in couple of ways.

    1. Using setState().
    IconButton(
  onPressed: () async { // add async here
    await showDialog( // await till dialog box closes.
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            content: StatefulBuilder(
              builder:
                  (BuildContext context, StateSetter setState) {
                return Column(
                  children: [
                    Text("Click on the box to enlarge the text"),
                    Checkbox(
                      value: _cesbox,
                      onChanged: (newbool) {
                        setState(
                          () {
                            _cesbox = newbool!;
                            if (_cesbox == true) {
                              textSize = 40;
                            }
                          },
                        );
                      },
                    ),
                  ],
                );
              },
            ),
          );
        });
    setState(() {}); // update widget.
  },
  icon: const Icon(
    Icons.menu,
    size: 25,
    color: Color.fromARGB(255, 51, 50, 50),
  ),
),
    1. Using ValueNotifier
    
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ValueNotifier<double> textSizeNotifier = ValueNotifier(14);
  bool _cesbox = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ValueListenableBuilder<double>(
                valueListenable: textSizeNotifier,
                builder: (context, value, child) {
                  return Column(
                    children: [
                      Text(
                        'Fluttern',
                        style: TextStyle(fontSize: value),
                      ),
                      Text("Click on the box to enlarge the textn"),
                      Checkbox(
                          value: _cesbox,
                          onChanged: (newbool) {
                            setState(() {
                              _cesbox = newbool!;
                              if (_cesbox == true) {
                                textSizeNotifier.value = 40;
                              }
                            });
                          })
                    ],
                  );
                }),
            IconButton(
              onPressed: () {
                showDialog(
                    context: context,
                    builder: (BuildContext context) {
                      return AlertDialog(
                        content: StatefulBuilder(
                          builder:
                              (BuildContext context, StateSetter setState) {
                            return Column(
                              children: [
                                Text("Click on the box to enlarge the text"),
                                Checkbox(
                                  value: _cesbox,
                                  onChanged: (newbool) {
                                    setState(
                                      () {
                                        _cesbox = newbool!;
                                        if (_cesbox == true) {
                                          textSizeNotifier.value = 40;
                                        }
                                      },
                                    );
                                  },
                                ),
                              ],
                            );
                          },
                        ),
                      );
                    });
              },
              icon: const Icon(
                Icons.menu,
                size: 25,
                color: Color.fromARGB(255, 51, 50, 50),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search