响应式材料按钮小部件抖动

Question

我设计了一个登录界面。一切工作正常，但是这两个按钮看起来并不好。Myscreen in landscape我想根据屏幕尺寸和方向进行调整

want to achieve

这是我的代码来定义它们

Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Expanded(
                      child: Material(
                        elevation: 15.0,
                        borderRadius: BorderRadius.circular(5.0),
                        color: Color(0xFF0148A4),
                        child: MaterialButton(
                          textColor: Colors.white,
                          disabledColor: Colors.grey,
                          disabledTextColor: Colors.black,
                          padding:
                              EdgeInsets.fromLTRB(20.0, 10.0, 0.0, 10.0),
                          splashColor: Colors.blueAccent,
                          onPressed: () {
                            /*...*/
                          },
                          child: Row(
                            textBaseline: TextBaseline.alphabetic,
                            children: <Widget>[
                              Icon(
                                FontAwesomeIcons.facebookF,
                                color: Colors.white,
                              ),
                              SizedBox(
                                width: 20.0,
                              ),
                              Text(
                                'Facebook',
                                textAlign: TextAlign.start,
                                style: TextStyle(
                                  fontSize: 15.0,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                    SizedBox(
                      width: 15.0,
                    ),
                    Expanded(
                      child: Material(
                        elevation: 15.0,
                        borderRadius: BorderRadius.circular(5.0),
                        color: Color(0xFFF14436),
                        child: MaterialButton(
                          textColor: Colors.white,
                          disabledColor: Colors.grey,
                          disabledTextColor: Colors.black,
                          padding:
                              EdgeInsets.fromLTRB(20.0, 10.0, 0.0, 10.0),
                          splashColor: Colors.redAccent,
                          onPressed: () {
                            /*...*/
                          },
                          child: Row(
                            textBaseline: TextBaseline.ideographic,
                            children: <Widget>[
                              Icon(
                                FontAwesomeIcons.google,
                                color: Colors.white,
                              ),
                              SizedBox(
                                width: 20.0,
                              ),
                              Text(
                                'Google',
                                style: TextStyle(fontSize: 15.0),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ],
                ),

此外，下面的按钮也需要响应。我正在使用扩展的小部件，但其工作如图所示。还有其他方法！

Answer 1

您可以尝试FractionallySizedBox相对于可用的屏幕宽度设置整个容器的宽度。另外FittedBox可以帮助限制要在边界内绘制的小部件。

 import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light().copyWith(scaffoldBackgroundColor: Colors.white),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FractionallySizedBox(
      widthFactor: .8,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: FittedBox(
              fit: BoxFit.fitWidth,
              child: Material(
                elevation: 15.0,
                borderRadius: BorderRadius.circular(5.0),
                color: Color(0xFF0148A4),
                child: MaterialButton(
                  textColor: Colors.white,
                  disabledColor: Colors.grey,
                  disabledTextColor: Colors.black,
                  padding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                  splashColor: Colors.blueAccent,
                  onPressed: () {
                    /*...*/
                  },
                  child: Row(
                    textBaseline: TextBaseline.alphabetic,
                    children: <Widget>[
                      Icon(
                        Icons.home,
                        color: Colors.white,
                      ),
                      SizedBox(
                        width: 20.0,
                      ),
                      Text(
                        'Facebook',
                        textAlign: TextAlign.start,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          fontSize: 15.0,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
          SizedBox(
            width: 15.0,
          ),
          Expanded(
            child: FittedBox(
              fit: BoxFit.fitWidth,
              alignment: Alignment.center,
              child: Material(
                elevation: 15.0,
                borderRadius: BorderRadius.circular(5.0),
                color: Color(0xFFF14436),
                child: MaterialButton(
                  textColor: Colors.white,
                  disabledColor: Colors.grey,
                  disabledTextColor: Colors.black,
                  padding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                  splashColor: Colors.redAccent,
                  onPressed: () {
                    /*...*/
                  },
                  child: Row(
                    textBaseline: TextBaseline.ideographic,
                    children: <Widget>[
                      Icon(
                        Icons.home,
                        color: Colors.white,
                      ),
                      SizedBox(
                        width: 20.0,
                      ),
                      Text(
                        'Google',
                        style: TextStyle(fontSize: 15.0),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}