szakes1
szakes1

Reputation: 904

How to position this card and text in Flutter?

I'm re-writing my application written Kotlin to Flutter, but I'm struggling with my layout.

Here's the photo of my Kotlin application I'd like to re-create in Flutter: Kotlin

Here's the photo of my Flutter application: flutter

As you see, my button-like Card (this card has to imitate button) is not at the end of my screen. I want it exactly like in my Kotlin application.

I also want my center text to be responsive, so when I open my Flutter application on screen with 18:9 ratio, it needs to fill the blank space.

I would be extremely glad, if someone helped me.

My Flutter code:

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),)
                            ],
                          ),
                        ),
                      ),
                    ),

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

Upvotes: 1

Views: 2956

Answers (1)

CopsOnRoad
CopsOnRoad

Reputation: 268514

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),)
                              ],
                            ),
                          ),
                        ),
                      ),

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

For 18:9 part you need to add following in your tag of AndroidManifest.xml file.

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

Upvotes: 1

Related Questions