Flutter 响应式文本字段匹配屏幕尺寸

Question

您好，我正在研究 flutter，需要使用 MediaQuery 使我的 TextField 响应，它匹配所有屏幕尺寸。我尝试了两种方法，两种方法都不适用于平板电脑，这是第一种方法

Container(
                    height: 100.0,
                    width: 300.0,
                    child: TextField(
                      cursorColor: Colors.black,
                      style: TextStyle(color: Colors.pinkAccent),
                      controller: itemNameController,
                      keyboardType: TextInputType.text,
                      decoration: new InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Hello input here',
                        isDense: true,
                        contentPadding: EdgeInsets.only(
                            left: 5, bottom: 11, top: 11, right: 5),
                      ),
                    ),
                  ),

第二种方法是

                           TextField(
                          cursorColor: Colors.black,
                          style: TextStyle(color: Colors.pinkAccent, height: 
                          MediaQuery.of(context).size.height/50),
                          controller: itemNameController,
                          keyboardType: TextInputType.text,
                          decoration: new InputDecoration(
                            border: OutlineInputBorder(),
                            labelText: 'Hello input here',
                            isDense: true,
                            contentPadding: EdgeInsets.only(
                                left: 5, bottom: 11, top: 11, right: 5),
                          ),
                        ),

它们都没有反射(reflect)在平板电脑上。谢谢

Answer 1

我编写了一个响应式类，可以根据屏幕大小调整大小。我在小部件类中实现这个类，并根据屏幕大小给出一个 int 值。这样，它就会根据每部手机的屏幕尺寸来调整大小。

class SizeConfig{
    
  double heightSize(BuildContext context, double value){
    value /= 100;
    return MediaQuery.of(context).size.height * value;
  }

  double widthSize(BuildContext context,double value ){
    value /=100;
    return MediaQuery.of(context).size.width * value;
  }
}

你可以像这样使用它；

Container(
                height: sizedConfig().heightSize(context, 2.0)
                width: sizedConfig().widthSize(context, 1.5),
                child: TextField(
                  cursorColor: Colors.black,
                  style: TextStyle(color: Colors.pinkAccent),
                  controller: itemNameController,
                  keyboardType: TextInputType.text,
                  decoration: new InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Hello input here',
                    isDense: true,
                    contentPadding: EdgeInsets.only(
                        left: 5, bottom: 11, top: 11, right: 5),
                  ),
                ),
              ),