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

View File

@ -8,6 +8,13 @@ packages:
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "2.5.0" 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: boolean_selector:
dependency: transitive dependency: transitive
description: description:

View File

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