flutter - 如何使该页面在所有屏幕上响应？

Question

我正在为波兰观众编写一个非常简单的优惠券应用。问题是我不知道如何使此页面响应。在较小的屏幕上，我的页面如下所示:
图片1:较小的屏幕

图2:较小的屏幕

图片1:大屏幕(我希望在所有设备上都具有这种外观)

图片2:更大的屏幕

有人知道我该怎么做吗？我想要一个响应文本，一个响应按钮，并且我希望其他所有东西在每台设备上看起来都一样。我该怎么做呢？
码
经典优惠券屏幕

import 'package:flutter/cupertino.dart';

class ClassicCouponScreenArguments {
  final String imagePath;

  ClassicCouponScreenArguments(this.imagePath);
}

class ClassicCouponScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final ClassicCouponScreenArguments args = ModalRoute.of(context).settings.arguments;
    return CupertinoPageScaffold(
      child: SafeArea(
        child: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'DATA WYDANIA:',
                        style: TextStyle(color: CupertinoColors.black, fontWeight: FontWeight.bold, fontSize: 17.0),
                      ),
                      Text(
                        '12/11/2019',
                        style: TextStyle(color: CupertinoColors.black, fontSize: 15.0),
                      )
                    ],
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text('UNIKALNY KOD:', style: TextStyle(color: CupertinoColors.black, fontWeight: FontWeight.bold, fontSize: 17.0)),
                      Text('A-78-IA-6', style: TextStyle(color: CupertinoColors.black, fontSize: 15.0))
                    ],
                  )
                ],
              ),
              SizedBox(height: 16.0),
              Image.asset(args.imagePath),
              SizedBox(height: 16.0),
              Text.rich(
                TextSpan(
                    style: TextStyle(fontSize: 15.0),
                    text:
                        'Kupon ten upoważnia do jednokrotnego odbioru produktu gratis przy kolejnym dowolnym zakupie z oferty klasycznej. Kupon ważny jest przez 7 dni od czasu jego wygenerowania i może być zrealizowany w dowolnej restauracji Makdolan\'s w Polsce z wyłączeniem restauracji znajdujących się na terenie Portu Lotniczego im. Fryderyka Chopina w Warszawie oraz Portu Lotniczego im. Lecha Wałęsy w Gdańsku. Szczegółowy regulamin ankiety „Opinia Gości" znajduje się na stronie',
                    children: <TextSpan>[
                      TextSpan(text: ' www.makdolan.pl ', style: TextStyle(color: CupertinoColors.systemYellow)),
                      TextSpan(text: 'w sekcji', style: TextStyle(color: CupertinoColors.black)),
                      TextSpan(text: ' Regulaminy', style: TextStyle(color: CupertinoColors.systemYellow, decoration: TextDecoration.underline))
                    ]),
              ),
              Spacer(),
              Container(
                height: 95.0,
                child: CupertinoButton(
                  color: Color(0xFFF7C443),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        'DRUKUJ /',
                        style: TextStyle(fontSize: 25.0),
                      ),
                      Text('ZAPISZ JAKO PDF', style: TextStyle(fontSize: 25.0))
                    ],
                  ),
                  onPressed: () {},
                ),
              ),
              SizedBox(height: 16.0),
              Container(
                height: 95.0,
                child: CupertinoButton(
                  color: Color(0xFFF7C443),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        'PRZEŚLIJ KUPON',
                        style: TextStyle(fontSize: 25.0),
                      ),
                      Text('(WYSYŁKA W CIĄGU 24 GODZIN)', style: TextStyle(fontSize: 14.0))
                    ],
                  ),
                  onPressed: () {},
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

邮件优惠券屏幕

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:makdolan_flutter/core/makdolan.dart';

final double _sizedBox = 8.0;

class MailCouponScreenArguments {
  final String imagePath;

  MailCouponScreenArguments(this.imagePath);
}

class MailCouponScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final MailCouponScreenArguments args = ModalRoute.of(context).settings.arguments;
    return CupertinoPageScaffold(
      child: SafeArea(
          child: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    GestureDetector(
                      onTap: () => Navigator.pop(context),
                      child: Icon(
                        Icons.arrow_back,
                        color: CupertinoColors.black,
                      ),
                    ),
                  ],
                ),
                Row(
                  children: [
                    Icon(
                      Icons.archive,
                      color: CupertinoColors.black,
                    ),
                    SizedBox(width: _sizedBox),
                    Icon(
                      Icons.delete,
                      color: CupertinoColors.black,
                    ),
                    SizedBox(width: _sizedBox),
                    Icon(Icons.mail, color: CupertinoColors.black),
                    SizedBox(width: _sizedBox),
                    Icon(
                      Icons.more_vert,
                      color: CupertinoColors.black,
                    )
                  ],
                )
              ],
            ),
            SizedBox(height: _sizedBox),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    Text('Voucher', style: TextStyle(color: Colors.black, fontSize: 17.0)),
                    SizedBox(width: _sizedBox),
                    Container(
                      color: Colors.grey[300],
                      child: Padding(
                        padding: EdgeInsets.fromLTRB(4, 2, 4, 2),
                        child: Text('Odebrane', style: TextStyle(color: Colors.black, fontSize: 15.0)),
                      ),
                    )
                  ],
                ),
                Icon(Icons.star_border, color: CupertinoColors.black),
              ],
            ),
            SizedBox(height: _sizedBox),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    Container(
                        height: 45.0,
                        width: 45.0,
                        decoration: BoxDecoration(color: Colors.blue[200], shape: BoxShape.circle),
                        child: Center(
                          child: Text('M', style: TextStyle(color: CupertinoColors.white)),
                        )),
                    SizedBox(width: _sizedBox),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Text('Makdolan Poland', style: TextStyle(color: Colors.black, fontSize: 15.0)),
                            SizedBox(width: _sizedBox),
                            Text('Wczoraj', style: TextStyle(color: Colors.grey, fontSize: 15.0))
                          ],
                        ),
                        SizedBox(height: _sizedBox),
                        Row(
                          children: [
                            Text('do mnie', style: TextStyle(color: Colors.grey, fontSize: 15.0)),
                            Icon(Icons.expand_more, color: CupertinoColors.black)
                          ],
                        )
                      ],
                    )
                  ],
                ),
                Row(
                  children: [
                    Icon(
                      Icons.reply,
                      color: CupertinoColors.black,
                    ),
                    SizedBox(width: _sizedBox),
                    Icon(
                      Icons.more_vert,
                      color: CupertinoColors.black,
                    )
                  ],
                )
              ],
            ),
            SizedBox(height: _sizedBox),
            Text(
              'Dzień dobry,\nPrzesyłamy kupon w podziękowaniu za wzięcie udziału w ankiecie.',
              style: TextStyle(color: Colors.grey, fontSize: 16.0),
            ),
            SizedBox(height: _sizedBox),
            Row(
              children: [
                Text('DATA WYDANIA:', style: TextStyle(color: Colors.black, fontSize: 16.0, fontWeight: FontWeight.bold)),
                SizedBox(width: _sizedBox),
                Text(Makdolan.date(), style: TextStyle(color: Colors.grey, fontSize: 16.0))
              ],
            ),
            SizedBox(height: _sizedBox),
            Row(
              children: [
                Text('UNIKALNY KOD:', style: TextStyle(color: Colors.black, fontSize: 16.0, fontWeight: FontWeight.bold)),
                SizedBox(width: _sizedBox),
                Text(Makdolan.uniqueCode(), style: TextStyle(color: Colors.grey, fontSize: 16.0)),
              ],
            ),
            SizedBox(height: _sizedBox),
            Image.asset(args.imagePath),
            SizedBox(height: _sizedBox),
            Text.rich(
              TextSpan(
                text:
                    'Kupon ten upoważnia do jednokrotnego odbioru produktu gratis przy kolejnym dowolnym zakupie z oferty klasycznej. Kupon ważny jest przez 7 dni od czasu jego wygenerowania i może być zrealizowany w dowolnej restauracji Makdolan\'s w Polsce z wyłączeniem restauracji znajdujących się na terenie Portu Lotniczego im. Fryderyka Chopina w Warszawie oraz Portu Lotniczego im. Lecha Wałęsy w Gdańsku. Szczegółowy regulamin ankiety „Opinia Gości" znajduje się na stronie',
                style: TextStyle(color: Colors.black),
                children: <TextSpan>[
                  TextSpan(text: ' www.makdolan.pl ', style: TextStyle(color: Colors.amber, decoration: TextDecoration.underline)),
                  TextSpan(text: 'w sekcji', style: TextStyle(color: Colors.black)),
                  TextSpan(text: ' Regulaminy', style: TextStyle(color: Colors.amber, decoration: TextDecoration.underline))
                ],
              ),
              style: TextStyle(fontSize: 9.0),
            ),
            Spacer(),
            Text('Dziękujemy za wzięcie udziału w badaniu!', style: TextStyle(color: Colors.grey, fontSize: 13.0)),
            SizedBox(height: _sizedBox),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  height: 100.0,
                  width: 110.0,
                  decoration: BoxDecoration(
                    border: Border.all(width: 3.0, color: Colors.grey),
                    borderRadius: BorderRadius.all(Radius.circular(10.0)),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.reply,
                        color: CupertinoColors.black,
                      ),
                      Text('Odpowiedz', style: TextStyle(color: Colors.grey, fontSize: 15.5))
                    ],
                  ),
                ),
                Container(
                  height: 100.0,
                  width: 110.0,
                  decoration: BoxDecoration(border: Border.all(width: 3.0, color: Colors.grey), borderRadius: BorderRadius.all(Radius.circular(10.0))),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.reply_all,
                        color: CupertinoColors.black,
                      ),
                      Text('Odpowiedz', style: TextStyle(color: Colors.grey, fontSize: 16.0)),
                      Text('wszystkim', style: TextStyle(color: Colors.grey, fontSize: 16.0))
                    ],
                  ),
                ),
                Container(
                  height: 100.0,
                  width: 110.0,
                  decoration: BoxDecoration(border: Border.all(width: 3.0, color: Colors.grey), borderRadius: BorderRadius.all(Radius.circular(10.0))),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.forward,
                        color: CupertinoColors.black,
                      ),
                      Text('Przekaż dalej', style: TextStyle(color: Colors.grey, fontSize: 16.0))
                    ],
                  ),
                ),
              ],
            )
          ],
        ),
      )),
    );
  }
}

Answer 1

现在，可以通过多种方式使Flutter应用程序具有响应能力。
您可以使用MediaQuery()参数，这是一种简单的方法，您可以获取设备的宽度和高度，并可以使用它来调整窗口小部件的大小。
范例:

Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return Scaffold(
 body:Container() ); } 

现在您可以使用

size.height to get device height and size.width to get device width

SizedBox(
            width: size.width * .6,
            child: BeautifulRoundedButton(
              text: "Start Reading",
              fontSize: 20,
              press: (){
                
              },
            ),
          ),

“上方”按钮的大小将根据屏幕的宽度而定，将占总宽度的0.6％。同样的高度

 SizedBox(
          height: size.height * .4,

        ),

对此的引用是: Flutter Dev Guide
这很简单，还有其他方法，对他们来说
现在，我发现的其他非常出色的文章是:
Article 1 Article 2