how to adjust the container as per the device screen in flutter - flutter

Question

my app look like below
once logged in, in home page it has 3 tabs, and also a bottom navigation bar, and a app bar.
below the tab bar there is a container it contain many cards. I have given a fixed height to container, but when I checked in multiple devices there is a issue , i.e for the container having cards, getting overflow.
I tried to take the entire screen height then took the 70% for the container , but in phones with smaller resolution its showing overflow, if I adjusted as per that screen , In bigger screen , container takes very less space and more than 20% of space is wasted.
I am adding my code below,
here is my dashboard.dart code: ===>
import './generate_report_list.dart';
import './provider_classes.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:bmnav/bmnav.dart' as bmnav;
import './dashboard_view.dart';
class DashBoard extends StatefulWidget {
#override
_DashBoardState createState() => _DashBoardState();
}
class _DashBoardState extends State<DashBoard> with WidgetsBindingObserver {
int _currentIndex = 0;
Widget _view;
double maxHeight;
double maxWidth;
double maxCardWidth;
List<String> headers = ['Dashboard', 'Reports List', 'Profile', 'Settings'];
List<IconData> icons = [
Icons.dashboard,
Icons.insert_chart,
Icons.account_circle,
Icons.settings,
];
List<String> images = [
('assets/dashboard.png'),
('assets/growth.png'),
('assets/user.png'),
('assets/settings.png'),
];
getView(int index) {
List<Widget> _viewList = <Widget>[
GenerateReportList(),
GenerateReportList(),
GenerateReportList(),
GenerateReportList(),
];
setState(() {
_view = _viewList[index];
_currentIndex = index;
Provider.of<ScreenHeader>(context)
.setScreenHeader(headers[_currentIndex]);
});
}
#override
void initState() {
super.initState();
WidgetsBinding.instance.addObserver(this);
}
#override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
#override
Widget build(BuildContext context) {
String appBarHeader = Provider.of<ScreenHeader>(context).getScreenHeader();
maxWidth = MediaQuery.of(context).size.width;
maxCardWidth = maxWidth / 2;
return Scaffold(
appBar: AppBar(
title: Text(
(appBarHeader ?? 'Dashboard'),
),
centerTitle: true,
),
body: _view ?? DashBoardView(),
bottomNavigationBar: bmnav.BottomNav(
onTap: (index) {
getView(index);
},
labelStyle: bmnav.LabelStyle(visible: true),
iconStyle:
bmnav.IconStyle(color: Colors.black, onSelectColor: Colors.red),
elevation: 10,
items: [
bmnav.BottomNavItem(Icons.home, label: 'Dashboard'),
bmnav.BottomNavItem(Icons.trending_up, label: 'Reports'),
bmnav.BottomNavItem(Icons.person, label: 'Profile'),
bmnav.BottomNavItem(Icons.settings, label: 'Settings')
],
),
);
}
}
generate_report_list.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:developer' as developer;
class GenerateReportList extends StatefulWidget {
#override
_GenerateReportListState createState() => _GenerateReportListState();
}
class _GenerateReportListState extends State<GenerateReportList>
with SingleTickerProviderStateMixin {
Future reportList;
List<String> typesOfReports = [];
String currentReportSummaryType;
TabController _tabController;
#override
void initState() {
super.initState();
currentReportSummaryType = 'detailed';
_tabController = TabController(vsync: this, length: 3);
}
void _handleTabSelection(var index) {
developer
.log("index: array:" + typesOfReports[0] + "," + typesOfReports[1]);
setState(() {
print("index is " + index);
if (index == 0) {
currentReportSummaryType = "Group A";
} else if (index == 1) {
currentReportSummaryType = "Group B";
} else if (index == 2) {
currentReportSummaryType = "Group C";
}
});
}
getBody() {
double maxHeight = MediaQuery.of(context).size.height;
developer.log('Max height:' + maxHeight.toString());
return Scaffold(
resizeToAvoidBottomInset: false,
body: Column(
children: [
Container(
child: TabBar(
labelColor: Colors.black,
tabs: <Widget>[
new Tab(text: 'Group A', icon: new Icon(Icons.list)),
new Tab(text: 'Group B', icon: new Icon(Icons.pie_chart)),
new Tab(text: 'Group C', icon: new Icon(Icons.insert_chart)),
],
controller: _tabController,
onTap: _handleTabSelection,
),
),
SingleChildScrollView(
child: Container(
margin: new EdgeInsets.all(0.0),
height: (maxHeight * 0.60),
child: SingleChildScrollView(
child:new Center(
child: Column(
children: <Widget>[
cardGen(),
cardGen(),
cardGen(),
cardGen(),
cardGen(),
cardGen(),
],
)))))
],
));
}
cardGen() {
return Card(
child: Container(
height: (MediaQuery.of(context).size.height * 0.6) * 0.25,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text("sample"),
Text("dummy"),
],
),
],
),
),
);
}
createCard(BuildContext context) {
double maxHeight = MediaQuery.of(context).size.height;
Container(
height: (maxHeight * 0.6) * 0.25,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text("sample"),
Text("dummy"),
],
),
],
),
);
}
#override
Widget build(BuildContext context) {
return getBody();
}
}
provider_classes.dart
import 'package:flutter/material.dart';
class ScreenHeader with ChangeNotifier {
String _screenHeader;
getScreenHeader() => _screenHeader;
setScreenHeader(String newHeader) {
_screenHeader = newHeader;
notifyListeners();
}
}
provider classes is just for displaying the data in appbar.
In dashboard.dart I am creating a appbar,and bottomsheet, and in generate_report_list I am adding 3 new tabs , for each tab once clicked I am displaying the cards.
How to assign the height to container carrying card so that it should fit on every device.,and how can I add scrollable to the tabs , i.e group A, group B, Group C.
Thanks

Answer 1

Change:
Column(
children: <Widget>[
cardGen(),
...
To:
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
cardGen(),
...