Trying to create a method to control font size. Flutter App

Question

I'm trying to create a font size control, the idea is that the user can change the font size of the entire app through the Slider, drag this bar and adjust it like 14px, 16px, 18px, 20px... minimum and maximum. I also read that the best way to make the changes on several screens will be using the provider, what is your opinion on this choice? This is the starting code.

class Settings extends StatefulWidget {
  const Settings({Key? key}) : super(key: key);

  @override
  State<Settings> createState() => _SettingsState();
}

class _SettingsState extends State<Settings> {

  double _rating = 20;

  @override
  void initState() {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.transparent,
        iconTheme: IconThemeData(color: Colors.blue[900]),
        title: const Text(
          'Settings',
          style: TextStyle(
            color: Colors.black,
          ),
        ),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ListTile(
            title: Text('Button'),
            trailing: Icon(
              Icons.arrow_forward_ios,
              color: Colors.blue,
            ),
            onTap: () {
              showModalBottomSheet<void>(
                  context: context,
                  builder: (BuildContext context) {
                    return Container(
                      height: 200,
                      color: Colors.white,
                      child: Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text(
                                'Change font',
                                style: TextStyle(

                                ),
                              ),
                            ),
                            Slider(
                              value: _rating,
                              min: 0,
                              max: 28,
                              divisions: 4,
                              label: _rating.round().toString(),
                              onChanged: (newRating) {
                                setState(() => _rating = newRating);
                              },
                            ),
                          ],
                        ),
                      ),
                    );
                  }
              );
            },
          ),
        ],
      ),
    );
  }
}

Answer 1

Basic idea is stored fonsize value in somewhere that Text can reach, state management will update the value of fonsize and notify to theres subscription. Im not using provider so im use an other state management is get to do this.

// ignore_for_file: prefer_const_constructors_in_immutables

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class HomeController extends GetxController {
  var fontSizeObx = RxDouble(12);

  setFontsize(double value) => fontSizeObx.value = value;
}

class HomeRoute extends StatelessWidget {
  HomeRoute({Key? key}) : super(key: key);

  final controller = Get.put(HomeController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Obx(
          () => Column(
            children: [
              Text(
                'Hello world',
                style: TextStyle(fontSize: controller.fontSizeObx.value),
              ),
              Slider(
                value: controller.fontSizeObx.value,
                onChanged: controller.setFontsize,
                divisions: 10,
                min: 10.0,
                max: 100.0,
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

I have created a provider example it might help you

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
 runApp(MultiProvider(providers: [
 ChangeNotifierProvider(create: (_) => SliderValue()),
  ], child: MyApp()));
}

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
 return MaterialApp(
   title: 'Flutter Demo',
   theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: SizableText(),
  );
}
}

class SliderValue with ChangeNotifier {
double _value = 5;

double get value => _value;

void increment(double val) {
  _value = val;
  notifyListeners();
 }
}

class SizableText extends StatefulWidget {
const SizableText({Key? key}) : super(key: key);

@override
State<SizableText> createState() => _SizableTextState();
}

class _SizableTextState extends State<SizableText> {
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("AppBar")),
    body: Center(
     child: Column(
      children: <Widget>[
        Container(
          margin: EdgeInsets.only(right: 10),
          decoration: new BoxDecoration(
              color: Colors.blue,
              borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
              boxShadow: [
                new BoxShadow(
                    color: Colors.black38,
                    offset: new Offset(0.0, 2.0),
                    blurRadius: 10)
              ]),
          child: new Slider(
            value: context.watch<SliderValue>().value,
            activeColor: Colors.white,
            inactiveColor: Colors.white,
            onChanged: (double s) {
              context.read<SliderValue>().increment(s);
            },
            divisions: 10,
            min: 0.0,
            max: 10.0,
          ),
        ),
        Text1(text: 'Hello'),
        Text1(text: 'Hi'),
      ],
    ),
   ),
  );
 }
}

class Text1 extends StatelessWidget {
Text1({this.text});
final String? text;

@override
Widget build(BuildContext context) {
 return Text(text ?? '',
    style: TextStyle(fontSize: 10 * context.watch<SliderValue>().value));
 }
}

Answer 3

You can try this

double _value = 5;

  @override
  Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(title: Text("AppBar")),
     body: Center(
     child: Column(
      children: <Widget>[
        Container(
          margin: EdgeInsets.only(right: 10),
          decoration: new BoxDecoration(
              color: Colors.blue,
              borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
              boxShadow: [new BoxShadow(color: Colors.black38, 
              offset: new Offset(0.0, 2.0), blurRadius: 10)]),
          child: new Slider(
            value: _value,
            activeColor: Colors.white,
            inactiveColor: Colors.white,
            onChanged: (double s) {
              setState(() {
                _value = s;
              });
            },
            divisions: 10,
            min: 0.0,
            max: 10.0,
          ),
        ),
          Text("Hello World", style: TextStyle(fontSize: 10 * _value)),
        ],
      ),
    ),
  );
}