How to adjust Font Size of Flutter App according to Font Size of Device

Question

I'm learning Flutter.
I am not able to find the solution of a problem in Flutter.

The Problem is:
I have created an App and have tested it in my phone and everything seems fine but when I run the same App in another phone then the fonts of the App in that phone is large than the previous one and it's Overflowing by some pixels.
It's seems like my App is not able to adjust it's font size according to the device font size.
Please anyone help me to solve this problem

Screenshot of First Mobile Redme 5A

Screenshot of Second Mobile Realme 6

Code Snippet

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

Answer 1

I have also answer, with the easy technique. its work for me,

for text define,

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

and here is my sizeTextHeaderSet method(i use the method because may places I need to use this)

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

Answer 2

Try using media queries and define the font size dynamically.

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

So, your font size should be something like this:

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

Example:

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