flutter字体大小切换案例 小字体，标准字体，大字体，超大字体案例

flutter字体大小切换案例 小字体，标准字体，大字体，超大字体案例

Android iOS设备带有选择记录

我的flutter项目版本
environment:
sdk: ‘>=3.4.4 <4.0.0’

图片案例

pubspec.yaml 添加依赖

  # 屏幕尺寸适配 https://github.com/OpenFlutter/flutter_screenutil
  flutter_screenutil: ^5.9.3
  # 状态管理 https://github.com/rrousselGit/provider
  provider: ^6.1.2
  # 本地存储 官方插件 https://github.com/flutter/plugins
  shared_preferences: ^2.2.3

代码案例

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

void main() async {
  await ScreenUtil.ensureScreenSize(); // 确保屏幕大小被正确设置
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(360, 690), // 设计稿尺寸
      builder: (_, child) => MaterialApp(
        home: ChangeNotifierProvider(
          create: (context) => FontSizeProvider(),
          child: HomeScreen(),
        ),
      ),
    );
  }
}

class FontSizeProvider with ChangeNotifier {
  double _fontSize = 1.0; // 默认字体大小

  double get fontSize => _fontSize;

  Future<void> loadFontSize() async {
    final prefs = await SharedPreferences.getInstance();
    _fontSize = prefs.getDouble('fontSize') ?? 1.0;
    notifyListeners();
  }

  Future<void> saveFontSize(double size) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setDouble('fontSize', size);
    _fontSize = size;
    notifyListeners();
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //var fontSizeProvider = Provider.of<FontSizeProvider>(context, listen: false);
    var fontSizeProvider = Provider.of<FontSizeProvider>(context);
    fontSizeProvider.loadFontSize(); // 加载字体大小设置

    return Scaffold(
      appBar: AppBar(
        title: Text(
          '字体大小切换',
          style: TextStyle(
            fontSize:
                15.sp * fontSizeProvider.fontSize, // 根据fontSizeProvider调整字体大小
          ),
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '这是一段示例文本',
              style: TextStyle(
                fontSize: 15.sp *
                    fontSizeProvider.fontSize, // 根据fontSizeProvider调整字体大小
              ),
            ),
            ElevatedButton(
              onPressed: () => fontSizeProvider.saveFontSize(0.8), // 小字体
              child: Text('小字体'),
            ),
            ElevatedButton(
              onPressed: () => fontSizeProvider.saveFontSize(1.0), // 标准字体
              child: Text('标准字体'),
            ),
            ElevatedButton(
              onPressed: () => fontSizeProvider.saveFontSize(1.2), // 大字体
              child: Text('大字体'),
            ),
            ElevatedButton(
              onPressed: () => fontSizeProvider.saveFontSize(1.5), // 超大字体
              child: Text('超大字体'),
            ),
          ],
        ),
      ),
    );
  }
}

2.结合系统字体缩放
先获取系统字体大小，再获取我们设置的大小，就显示最终大小

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(828, 1792),
      builder: (context, child) {
        return ChangeNotifierProvider<ThemeProvider>(
          create: (_) => ThemeProvider()..loadSettings(),
          child: Consumer<ThemeProvider>(
            builder: (_, provider, __) {
              return MediaQuery(
                data: MediaQuery.of(context).copyWith(
                  textScaler: FixedTextScaler(provider.effectiveTextScaleFactor),
                ),
                child: MaterialApp(
                  title: 'Flutter Demo',
                  theme: ThemeData(
                    textTheme: TextTheme(
                      bodyText1: TextStyle(fontSize: 16),
                    ),
                  ),
                  home: MyHomePage(),
                ),
              );
            },
          ),
        );
      },
    );
  }
}

class ThemeProvider with ChangeNotifier {
  double _userTextScaleFactor = 1.0;
  double get userTextScaleFactor => _userTextScaleFactor;

  double get effectiveTextScaleFactor {
    // 获取系统的textScaleFactor，并结合用户设置的缩放比例（重要）//报错请用其他方式实现
    return MediaQuery.of(context).textScaleFactor * _userTextScaleFactor;
  }

  Future<void> loadSettings() async {
    final prefs = await SharedPreferences.getInstance();
    _userTextScaleFactor = prefs.getDouble('textScaleFactor') ?? 1.0;
    notifyListeners();
  }

  Future<void> saveSettings(double scale) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setDouble('textScaleFactor', scale);
    _userTextScaleFactor = scale;
    notifyListeners();
  }
}

class FixedTextScaler implements TextScaler {
  final double scale;

  FixedTextScaler(this.scale);

  @override
  double scaleText(double size) => scale * size;

  @override
  double? get textScaleFactor => scale;
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic Text Scale Factor'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('This text will be scaled by the provider value'),
            ElevatedButton(
              onPressed: () => themeProvider.saveSettings(1.2),
              child: Text('Increase Font Size'),
            ),
            ElevatedButton(
              onPressed: () => themeProvider.saveSettings(0.8),
              child: Text('Decrease Font Size'),
            ),
          ],
        ),
      ),
    );
  }
}