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

news/2024/11/17 4:26:06 标签: 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('超大字体'),
            ),
          ],
        ),
      ),
    );
  }
}


http://www.niftyadmin.cn/n/5754873.html

相关文章

Docker compose部署portainer

整个工具的代码都在Gitee或者Github地址内 gitee&#xff1a;solomon-parent: 这个项目主要是总结了工作上遇到的问题以及学习一些框架用于整合例如:rabbitMq、reids、Mqtt、S3协议的文件服务器、mongodb github&#xff1a;GitHub - ZeroNing/solomon-parent: 这个项目主要是…

stm32在linux环境下的开发与调试

环境安装 注&#xff1a;文末提供一键脚本 下载安装stm32cubeclt 下载地址为&#xff1a;https://www.st.com/en/development-tools/stm32cubeclt.html 选择 linux版本下载安装 安装好后默认在家目录st下 > $ ls ~/st/stm32cubeclt_1.16.0 …

【网络安全】网络安全防护体系

1.网络安全防护体系概述 1.1 网络安全的重要性 网络安全是保护网络空间不受恶意攻击、数据泄露和其他安全威胁的关键。随着数字化转型的加速&#xff0c;网络安全的重要性日益凸显&#xff0c;它不仅关系到个人隐私和企业机密的保护&#xff0c;还涉及到国家安全和社会稳定。…

使用 Vue 和 ECharts 创建交互式图表

使用 Vue 和 ECharts 创建交互式图表 引言 在现代 Web 应用中&#xff0c;数据可视化是一个重要的组成部分。它不仅能够帮助用户更好地理解复杂的数据&#xff0c;还能提升用户体验。 技术背景 Vue.js Vue.js 是一个渐进式 JavaScript 框架&#xff0c;用于构建用户界面。…

Python进程间通讯大揭秘:原理深度剖析与实战案例分享

在Python编程中,进程间通讯(Inter-Process Communication,简称IPC)是一个不可或缺的概念。它允许多个进程在操作系统中相互协作,共享信息或执行特定的任务。本文将深入剖析Python进程间通讯的原理,并通过实例展示其实现方法,帮助读者更好地理解和应用这一技术。 一、进程…

nacos集群源码解析-cp架构

目录 1 简介 1.1 什么是 CP 架构&#xff1f; 1.2 Nacos 中的 CP 架构特点 1.3 优缺点 1.4适用场景 2 cp架构的主节点选举 2.1 选举流程 2.2 总结 3 cp架构主节点的心跳发送 3.1 leader发送心跳 3.2 follower接收心跳 3.3 总结 4 cp架构的服务注册 4.1 注册流程 …

引领豪华MPV新趋势,比亚迪夏内饰科技广州车展全球首发

11月15日&#xff0c;比亚迪第五代DM技术中大型旗舰MPV夏内饰科技在广州车展正式发布。作为王朝网全新IP夏的首款同名车型&#xff0c;夏采用王朝新一代内饰设计语言&#xff0c;传承华夏文化深厚底蕴&#xff0c;从技术、平台、安全、设计、空间、智享、智驾七大维度&#xff…

自己动手写Qt Creator插件

文章目录 前言一、环境准备1.先看自己的Qt Creator IDE的版本2.下载源码 二、使用步骤1.参考原本的插件2.编写自定义插件1.cmakelist增加一个模块2.同理&#xff0c;qbs文件也增加一个3.插件源码 三、效果总结 前言 就目前而言&#xff0c;Qt Creator这个IDE&#xff0c;插件比…