如何根据设备的字体大小调整 Flutter App 的字体大小答案

【问题标题】：How to adjust Font Size of Flutter App according to Font Size of Device如何根据设备的字体大小调整 Flutter App 的字体大小
【发布时间】：2020-07-28 13:17:39
【问题描述】：

我正在学习 Flutter。
我无法在 Flutter 中找到问题的解决方案。

问题是：
我创建了一个应用程序并在我的手机中对其进行了测试，一切似乎都很好，但是当我在另一部手机中运行相同的应用程序时，该手机中的应用程序的字体比之前的字体大，并且 溢出了一些像素.
我的应用似乎无法根据设备字体大小调整其字体大小。
请任何人帮我解决这个问题

第一部手机截图 Redme 5A

第二部手机截图 Realme 6

代码片段

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home:Chicken(),
  ));
}

class Chicken extends StatefulWidget {
  Chicken({Key key}) : super(key: key);

  @override
  _ChickenState createState() => _ChickenState();
}

class Item {
  Item({this.isExpanded = false, this.headerValue, this.expandedValue});

  bool isExpanded;
  Widget expandedValue;
  String headerValue;
}

Text customText({text}) {   
  return Text(
    text,
    style: TextStyle(fontSize: 25.0, fontWeight: FontWeight.normal),
  );
}

class _ChickenState extends State<Chicken> {
  List<Item> _items = <Item>[
    Item(
        headerValue: 'Shop 1',
        expandedValue: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                customText(text: 'Time: '),
                customText(text: 'Rate: '),
                customText(text: 'Location: '),
              ],
            ),
            SizedBox(
              height: 15,
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                customText(text: '9:00 AM to 8:00 Pm'),
                customText(text: 'Rs. 100'),
                customText(text: 'ABC'),
              ],
            ),
          ],
        )),
    Item(
        headerValue: 'Shop 2',
        expandedValue: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                customText(text: 'Time: '),
                customText(text: 'Rate: '),
                customText(text: 'Location: '),
              ],
            ),
            SizedBox(
              height: 15,
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                customText(text: '9:00 AM to 8:00 Pm'),
                customText(text: 'Rs. 100'),
                customText(text: 'ABC'),
              ],
            ),
          ],
        )),
    Item(
        headerValue: 'Shop 3',
        expandedValue: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                customText(text: 'Time: '),
                customText(text: 'Rate: '),
                customText(text: 'Location: '),
              ],
            ),
            SizedBox(
              height: 15,
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                customText(text: '9:00 AM to 8:00 Pm'),
                customText(text: 'Rs. 100'),
                customText(text: 'ABC'),
              ],
            ),
          ],
        )),
  ];

  @override
  Widget build(BuildContext context) {
    Color headerColor;

    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          'Chicken',
          style: TextStyle(
            fontSize: 30.0,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      body: ListView(
        children: <Widget>[
          ExpansionPanelList(
              expansionCallback: (int index, bool isExpanded) {
                setState(() {
                  _items[index].isExpanded = !_items[index].isExpanded;
                });
              },
              children: _items.map<ExpansionPanel>((Item item) {
                return ExpansionPanel(
                    canTapOnHeader: true,
                    headerBuilder: (BuildContext context, bool isExpanded) {
                      headerColor = isExpanded ? Colors.blue : Colors.black;
                      return Container(
                        padding: EdgeInsets.only(top: 8.0),
                        child: Text(
                          item.headerValue,
                          style: TextStyle(
                            fontSize: 30.0,
                            color: headerColor,
                          ),
                          textAlign: TextAlign.center,
                        ),
                      );
                    },
                    isExpanded: item.isExpanded,
                    body: Container(
                      child: item.expandedValue,
                      padding: EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 10.0),
                    ));
              }).toList())
        ],
      ),
    );
  }
}

【问题讨论】：

标签： flutter fonts responsive

【解决方案1】：

尝试使用媒体查询并动态定义字体大小。

double screenWidth = MediaQuery.of(context).size.width
double screenHeight = MediaQuery.of(context).size.height

所以，你的字体大小应该是这样的：

fontSize: screenWidth * 0.01. (change this constant according to your need)

例子：

  class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
        home: Home(),
      );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Center(
        child: Container(
          child: Text(
            "Hey there",
            style: TextStyle(
                fontSize: screenWidth * 0.1
            ),
          ),
        ),
      ),
    );
  }
}

【讨论】：

我无法在我的代码中使用 MediaQuery.of(context)。请告诉我如何传递上下文以在字体大小中使用它！
我已经添加了一个例子，请看一下

【解决方案2】：

我也有回答，用简单的技术。它为我工作，

对于文本定义，

Text('Setting',
     style: TextStyle(
     fontWeight: FontWeight.bold,
      fontSize: sizeTextHeaderSet(context),
       ),
     )

这是我的 sizeTextHeaderSet 方法（我使用该方法是因为我可能需要使用该方法）

double sizeTextHeaderSet(context){
      double unitHeightValue = MediaQuery.of(context).size.height * 0.01;
      double customSize = 2.5;
      return customSize*unitHeightValue;
    }

【讨论】：