Flutter 如何根据设备字体大小调整颤振应用的字体大小

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

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

第一部手机截图

第二部手机截图

代码片段

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())
        ],
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）{
runApp（新材料）PP(
家：鸡（），
));
}
类扩展StatefulWidget{
鸡（{Key}）：超级（Key:Key）；
@凌驾
_ChickenState createState（）=>\u ChickenState（）；
}
类项目{
项（{this.isExpanded=false，this.headerValue，this.expandedValue}）；
布尔展开；
小部件扩展值；
字符串头值；
}
文本自定义文本（{Text}）{
返回文本(
文本
样式：TextStyle（fontSize:25.0，fontWeight:fontWeight.normal），
);
}
类_ChickenState扩展状态{
列表项=[
项目(
headerValue:“店铺1”，
expandedValue:行(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
纵队(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
自定义文本（文本：“时间：”），
自定义文本（文本：“速率：”），
customText（文本：“位置：”），
],
),
大小盒子(
身高：15，
),
纵队(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
customText（文本：“上午9:00至晚上8:00”），
自定义文本（文本：“Rs.100”），
自定义文本（文本：“ABC”），
],
),
],
)),
项目(
headerValue:“商店2”，
expandedValue:行(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
纵队(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
自定义文本（文本：“时间：”），
自定义文本（文本：“速率：”），
customText（文本：“位置：”），
],
),
大小盒子(
身高：15，
),
纵队(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
customText（文本：“上午9:00至晚上8:00”），
自定义文本（文本：“Rs.100”），
自定义文本（文本：“ABC”），
],
),
],
)),
项目(
headerValue:‘3号店’，
expandedValue:行(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
纵队(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
自定义文本（文本：“时间：”），
自定义文本（文本：“速率：”），
customText（文本：“位置：”），
],
),
大小盒子(
身高：15，
),
纵队(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
customText（文本：“上午9:00至晚上8:00”），
自定义文本（文本：“Rs.100”），
自定义文本（文本：“ABC”），
],
),
],
)),
];
@凌驾
小部件构建（构建上下文）{
色头颜色；
返回脚手架(
appBar:appBar(
标题：对，
标题：正文(
“鸡”，
样式：TextStyle(
字体大小：30.0，
fontWeight:fontWeight.bold，
),
),
),
正文：ListView(
儿童：[
扩展小组成员(
expansionCallback：（int索引，bool扩展）{
设置状态（）{
_项目[索引]。isExpanded=！\u项目[索引]。isExpanded；
});
},
子项：_items.map（（项）{
返回扩展面板(
坎塔波黑德：没错，
headerBuilder：（BuildContext上下文，bool isExpanded）{
headerColor=isExpanded？颜色。蓝色：颜色。黑色；
返回容器(
填充：仅限边缘设置（顶部：8.0），
子：文本(
item.headerValue，
样式：TextStyle(
字体大小：30.0，
颜色：headerColor，
),
textAlign:textAlign.center，
),
);
},
isExpanded:item.isExpanded，
主体：容器(
子项：item.expandedValue，
填充：来自LTRB（20.0,0.0,20.0,10.0）的边缘设置，
));
}).toList（））
],
),
);
}
}

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

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
            ),
          ),
        ),
      ),
    );
  }
}

---

我也有答案，用简单的技巧。这是我的工作

对于文本定义

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

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

---

我无法在代码中使用MediaQuery.of（上下文）。请告诉我如何传递上下文以在字体大小中使用它！我添加了一个示例，请看一看

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