Reputation: 904
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:
Here's the photo of my Flutter application:
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
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