flutter - 如何在Flutter中放置这张卡片和文字？

Question

我将用Kotlin编写的应用程序重新编写为Flutter，但是我在布局上苦苦挣扎。

这是我想在Flutter中重新创建的Kotlin应用程序的照片:

这是我的Flutter应用程序的照片:

如您所见，我的按钮式卡片(该卡片必须模仿按钮)不在屏幕末端。我希望它完全像我的Kotlin应用程序中一样。

我还希望我的中心文本能够响应，因此当我在屏幕上以18:9的比例打开Flutter应用程序时，它需要填充空白。

如果有人帮助我，我将非常高兴。

我的Flutter代码:

import 'package:flutter/material.dart';

class GeneratedCouponScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: SafeArea(
          child: Column(
            children: [
              Container(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('DATA WYDANIA:', style: TextStyle(color: Colors.black)),
                        Text('10/09/2018', style: TextStyle(color: Colors.black))
                      ],
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('UNIKALNY KOD:', style: TextStyle(color: Colors.black)),
                        Text('e-tf-74-T', style: TextStyle(color: Colors.black),)
                      ],
                    )
                  ],
                ),
              ),
              Container(
                padding: EdgeInsets.only(top: 8.0),
                child: Image.asset('assets/images/coupon_hamburger.png'),
              ),
              Container(
                padding: EdgeInsets.only(top: 8.0),
                child: Text('Kupon ten upoważnia upoważnia do jednoktronego odbioru produktu gratis przy kolejnym dowolnym zakupie z oferty klasycznej. Kupon wazny jest przez 7 dni od czasu jego wygenerowania i może być zrealizowany w dowolnej restauracji McDonald\'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 www.mcdonalds.pl w sekcji Regulaminy', style: TextStyle(color: Colors.black),),
              ),
              Container(
                padding: EdgeInsets.only(top: 8.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    Card(
                      child: Container(
                        height: 95.0,
                        color: Colors.orange[400],
                        child: Center(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text('DRUKUJ /', style: TextStyle(fontSize: 30.0),),
                              Text('ZAPISZ JAKO PDF', style: TextStyle(fontSize: 30.0),)
                            ],
                          ),
                        ),
                      ),
                    ),

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

Answer 1

class GeneratedCouponScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Container(
          padding: EdgeInsets.all(16.0),
          child: SafeArea(
            child: Column(
              children: [
                Container(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('DATA WYDANIA:', style: TextStyle(color: Colors.black)),
                          Text('10/09/2018', style: TextStyle(color: Colors.black))
                        ],
                      ),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('UNIKALNY KOD:', style: TextStyle(color: Colors.black)),
                          Text('e-tf-74-T', style: TextStyle(color: Colors.black),)
                        ],
                      )
                    ],
                  ),
                ),
                Container(
                  padding: EdgeInsets.only(top: 8.0),
                  child: Image.asset(chocolateImage),
                ),
                Container(
                  padding: EdgeInsets.only(top: 8.0),
                  child: Text('Kupon ten upoważnia upoważnia do jednoktronego odbioru produktu gratis przy kolejnym dowolnym zakupie z oferty klasycznej. Kupon wazny jest przez 7 dni od czasu jego wygenerowania i może być zrealizowany w dowolnej restauracji McDonald\'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 www.mcdonalds.pl w sekcji Regulaminy', style: TextStyle(color: Colors.black),),
                ),
                Spacer(), // add this
                Container(
                  padding: EdgeInsets.only(top: 8.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Card(
                        child: Container(
                          height: 95.0,
                          color: Colors.orange[400],
                          child: Center(
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text('DRUKUJ /', style: TextStyle(fontSize: 30.0),),
                                Text('ZAPISZ JAKO PDF', style: TextStyle(fontSize: 30.0),)
                              ],
                            ),
                          ),
                        ),
                      ),

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

对于18:9部分，您需要在 AndroidManifest.xml文件的标签中添加以下内容。

<meta-data android:name="android.max_aspect" 
     android:value="2.1" />