Made the layout responsive !

This commit is contained in:
Thomas Fransolet 2021-03-09 22:35:32 +01:00
parent 3d0017a916
commit 8b54432d13
4 changed files with 100 additions and 58 deletions

View File

@ -1,6 +1,7 @@
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import 'package:tablet_app/Components/Map/map_context.dart';
@ -10,6 +11,7 @@ import 'package:tablet_app/Models/map-marker.dart';
import 'package:tablet_app/Models/section.dart';
import 'package:tablet_app/constants.dart';
import 'package:http/http.dart' as http;
import 'package:auto_size_text/auto_size_text.dart';
class MainViewWidget extends StatefulWidget {
MainViewWidget();
@ -69,10 +71,13 @@ class _MainViewWidget extends State<MainViewWidget> {
children: [
Padding(
padding: const EdgeInsets.only(left: 15.0, top: 10.0),
child: Container(
width: 125,
height: 125,
decoration: boxDecoration(sectionSelected),
child: AspectRatio(
aspectRatio: 4 / 4,
child: Container(
/*width: 125,
height: 125,*/
decoration: boxDecoration(sectionSelected),
),
),
),
SizedBox(
@ -87,13 +92,22 @@ class _MainViewWidget extends State<MainViewWidget> {
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: Text(sectionSelected.title, style: new TextStyle(fontSize: 40))
child: AutoSizeText(
sectionSelected.title,
style: new TextStyle(fontSize: 25),
maxLines: 1,
),
)
),
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: Text(sectionSelected.description, style: new TextStyle(fontSize: 30)))
child: AutoSizeText(
sectionSelected.description,
style: new TextStyle(fontSize: 20),
maxLines: 2,
),
)
)
],
),
@ -150,61 +164,81 @@ class _MainViewWidget extends State<MainViewWidget> {
height: size.height,
width: size.width,
color: kBackgroundGrey,
child: Center(
child: Container(
height: size.height * 0.85,
width: size.width * 0.9,
child: FutureBuilder(
future: getSections(),
builder: (context, AsyncSnapshot<dynamic> snapshot) {
print('helloo test');
if (snapshot.connectionState == ConnectionState.done) {
return GridView.builder(
shrinkWrap: true,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return // User Picture
InkWell(
onTap: () {
setState(() {
sectionSelected = snapshot.data[index];
});
},
child: Container(
decoration: boxDecoration(snapshot.data[index]),
padding: const EdgeInsets.all(20),
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
child: Align(
alignment: Alignment.bottomRight,
child: FractionallySizedBox(
heightFactor: 0.35,
child: Column(
children: [
Align(
alignment: Alignment.centerRight,
child: Text(snapshot.data[index].title, style: new TextStyle(fontSize: 35))),
Align(
alignment: Alignment.centerRight,
child: Text(snapshot.data[index].description, style: new TextStyle(fontSize: 25, fontFamily: ""))
),
],
)
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Align(
alignment: Alignment.centerRight,
child: Container(
height: size.height * 0.1,
color: Colors.blue,
child: Text("Langues")
),
),
Container(
height: size.height * 0.9,
width: size.width * 0.9,
child: FutureBuilder(
future: getSections(),
builder: (context, AsyncSnapshot<dynamic> snapshot) {
print('helloo test');
if (snapshot.connectionState == ConnectionState.done) {
return GridView.builder(
shrinkWrap: true,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return // User Picture
InkWell(
onTap: () {
setState(() {
sectionSelected = snapshot.data[index];
});
},
child: Container(
decoration: boxDecoration(snapshot.data[index]),
padding: const EdgeInsets.all(25),
margin: EdgeInsets.symmetric(vertical: 25, horizontal: 25),
child: Align(
alignment: Alignment.bottomRight,
child: FractionallySizedBox(
heightFactor: 0.4,
child: Column(
children: [
Align(
alignment: Alignment.centerRight,
child: AutoSizeText(
snapshot.data[index].title,
style: new TextStyle(fontSize: 25),
maxLines: 1,
),
),
Align(
alignment: Alignment.centerRight,
child: AutoSizeText(
snapshot.data[index].description,
style: new TextStyle(fontSize: 18, fontFamily: ""),
maxLines: 1,
),
),
],
)
),
),
),
),
);
}
);
} else if (snapshot.connectionState == ConnectionState.none) {
return Text("No data");
} else {
return Center(child: Container(height: size.height * 0.2, child: Text('LOADING TODO FRAISE')));
);
}
);
} else if (snapshot.connectionState == ConnectionState.none) {
return Text("No data");
} else {
return Center(child: Container(height: size.height * 0.2, child: Text('LOADING TODO FRAISE')));
}
}
}
),
),
),
),
]),
)
);
}

View File

@ -126,7 +126,7 @@ class _MapViewWidget extends State<MapViewWidget> {
static final CameraPosition _kGooglePlex = CameraPosition(
target: LatLng(50.416639, 4.879169),
zoom: 25.55,
zoom: 18,
);
/*static final CameraPosition _kLake = CameraPosition(

View File

@ -8,6 +8,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "2.5.0"
auto_size_text:
dependency: "direct main"
description:
name: auto_size_text
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.0"
boolean_selector:
dependency: transitive
description:

View File

@ -27,6 +27,7 @@ dependencies:
google_maps_flutter: ^2.0.1
provider: ^5.0.0
http: ^0.12.2
auto_size_text: ^2.1.0
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.