针对不同屏幕尺寸的 Flutter Design

Question

我在 phone 和平板电脑上试用了我的应用程序。如果设计在另一个屏幕上很好，则该设计看起来很糟糕。我分享了一张 phone 和平板电脑的图片，这样您就可以看到使用不同屏幕时设计看起来有什么不同 sizes.How 我可以使用 Flutter 在所有不同的屏幕尺寸上设置我的设计吗？

我的代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

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

class Myapp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.red),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text(
            "The Bar ",
            style: TextStyle(
              color: Colors.white,
              fontSize: 28.0,
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          splashColor: Colors.green,
          child: Icon(
            Icons.mouse,
            color: Colors.white,
          ),
          onPressed: () {
            print("You was clicked the button!");
          },
        ),
        body: Column(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Text(
              "Kinds of Butoons and Images",
              style: TextStyle(fontSize: 26, color: Colors.blue),
              textAlign: TextAlign.center,
            ),
            Container(
              child: Expanded(
                flex: 1,
                child:Column(
                  children: <Widget>[
                    Container(
                      child: Row(
                        children: <Widget>[
                          Expanded(

                            child: Container(
                              margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
                              child: Row(
                                children: <Widget>[
                                  Container(
                                    child: Expanded(
                                      flex: 1,
                                      child: Container(
                                        margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
                                        child: Column(
                                          children: <Widget>[
                                            CircleAvatar(
                                              backgroundImage: AssetImage("assets/images/test.jpg"),
                                              radius: 140,

                                            ),
                                            Text(
                                              "X",
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ),
                                  Container(
                                    child: Expanded(
                                      flex: 1,
                                      child: Container(
                                        margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
                                        child: Column(
                                          children: <Widget>[
                                            Image(
                                              image: AssetImage(
                                                  "assets/images/test.jpg"),
                                            ),
                                            Text(
                                              "X",
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ),
                                  Container(
                                    child: Expanded(
                                      flex: 1,
                                      child: Container(
                                        margin: EdgeInsets.fromLTRB(5, 0, 5, 0),
                                        child: Column(
                                          children: <Widget>[
                                            Image(
                                              image: AssetImage(
                                                  "assets/images/test.jpg"),
                                            ),
                                            Text(
                                              "X",
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ),

                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Container(
              child: Expanded(
                flex: 1,
                child:Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Container(
                      child: Row(
                        children: <Widget>[
                          Expanded(

                            child: Container(
                              margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
                              child: Row(
                                children: <Widget>[
                                  Container(
                                    child: Expanded(
                                      flex: 1,
                                      child: Container(
                                        margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
                                        child: Column(
                                          children: <Widget>[
                                            CircleAvatar(
                                              backgroundImage: AssetImage("assets/images/test.jpg"),
                                              radius: 140,

                                            ),
                                            Text(
                                              "X",
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ),
                                  Container(
                                    child: Expanded(
                                      flex: 1,
                                      child: Container(
                                        margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
                                        child: Column(
                                          children: <Widget>[
                                            Image(
                                              image: AssetImage(
                                                  "assets/images/test.jpg"),
                                            ),
                                            Text(
                                              "X",
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ),
                                  Container(
                                    child: Expanded(
                                      flex: 1,
                                      child: Container(
                                        margin: EdgeInsets.fromLTRB(5, 0, 5, 0),
                                        child: Column(
                                          children: <Widget>[
                                            Image(
                                              image: AssetImage(
                                                  "assets/images/test.jpg"),
                                            ),
                                            Text(
                                              "X",
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ),

                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

要限制 CircleAvatar 的高度，请使用 LayoutBuilder 和 ConstrainedBox:

LayoutBuilder(
  builder: (context, constraints) {
    return ConstrainedBox(
      constraints: BoxConstraints(
        maxHeight: constraints.maxWidth, 
        maxWidth: constraints.maxWidth
      ),
      child: CircleAvatar(
        backgroundImage: NetworkImage('...'),
        radius: 140,
      ),
    );
  }
),

针对不同屏幕尺寸的 Flutter Design

Flutter Design for different screen sizes

flutter

flutter-layout

flutter-container