Fit Container Widget Height to Parent Row Height - flutter

I have a web application with the following layout:
I am trying to create a flutter application with a similar layout and this is what I have so far:
For reproduction purposes, my layout logic is the following (all my code is in the main.dart file for this example):
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Assemblers Tasks',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.deepOrange,
),
home: MyHomePage(title: 'Assembly Tasks'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String dropdownValue;
List<Map<String, dynamic>> buildItems = [];
getBuilds() {
List<Map<String, dynamic>> items = [];
items.add({"id": 10, "vehicleModel": "A10", "vehicleNumber": "TEST-00010"});
setState(() {
buildItems = items;
});
}
List<Map<String, dynamic>> buildSections = [];
getSections() {
List<Map<String, dynamic>> items = [];
items.add({
"id": 5,
"section": "Front",
});
items.add({
"id": 15,
"section": "Rear",
});
setState(() {
buildSections = items;
});
}
Future<List<Map<String, dynamic>>> getSystems(String buildSectionId) async {
List<Map<String, dynamic>> items = [];
if (int.parse(buildSectionId) == 5) {
items.add({
"id": 4,
"system": "Hydraulics",
});
items.add({
"id": 20,
"system": "High Voltage",
});
}
return items;
}
#override
void initState() {
getBuilds();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 275.0,
child: DropdownButton(
value: dropdownValue,
hint: Text("Choose Build"),
isExpanded: true,
items: buildItems
.map<Map<String, String>>((Map<String, dynamic> item) {
String id = item["id"].toString();
String name = item["vehicleModel"] + " " + item["vehicleNumber"];
return {"id": id, "name": name};
})
.toList()
.map<DropdownMenuItem<String>>((Map<String, String> item) {
return DropdownMenuItem<String>(
value: item["id"],
child: Text(item["name"]),
);
})
.toList(),
onChanged: (String newValue) {
getSections();
setState(() {
dropdownValue = newValue;
});
}),
),
],
),
Row(
children: <Widget>[
Container(
width: 150.0,
height: 60.0,
color: Colors.black,
child: Align(
alignment: Alignment.center,
child: Text(
"SECTION",
style: TextStyle(
color: Colors.white,
fontSize: 17.3,
letterSpacing: 1.35,
),
),
),
),
Container(
width: 150.0,
height: 60.0,
color: Color(0xff444444),
child: Align(
alignment: Alignment.center,
child: Text(
"SYSTEM",
style: TextStyle(
color: Colors.white,
fontSize: 17.3,
letterSpacing: 1.35,
),
),
),
),
Expanded(
child: Container(
height: 60.0,
padding: EdgeInsets.only(left: 36.0),
margin: EdgeInsets.only(right: 72.0),
color: Color(0xff666666),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"TASK",
style: TextStyle(
color: Colors.white,
fontSize: 17.3,
letterSpacing: 1.35,
),
),
),
),
)
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(border: Border.all(color: Colors.black12, width: 1.0, style: BorderStyle.solid)),
height: MediaQuery.of(context).size.height - 225,
child: ListView.builder(
shrinkWrap: true,
itemCount: buildSections.length,
itemBuilder: (BuildContext context, int index) {
String section = buildSections[index]["section"] != null ? buildSections[index]["section"] : "";
String buildSectionId = buildSections[index]["id"].toString();
return Row(
children: <Widget>[
Container(
width: 150.0,
decoration: BoxDecoration(
border: Border(
right: BorderSide(
color: Colors.black12,
width: 1.0,
),
bottom: BorderSide(
color: Colors.black12,
width: 1.0,
),
),
),
padding: EdgeInsets.fromLTRB(0.0, 16.0, 0.0, 16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Align(
alignment: Alignment.center,
child: Center(
child: RotatedBox(
quarterTurns: -1,
child: Text(
section.toUpperCase(),
style: TextStyle(
fontSize: 15.0,
letterSpacing: 1.2,
),
),
),
),
),
Padding(
padding: EdgeInsets.all(12.0),
),
Align(
alignment: Alignment.center,
child: FloatingActionButton(
child: Icon(Icons.image),
),
),
],
),
),
FutureBuilder(
future: getSystems(buildSectionId),
builder: (BuildContext context, AsyncSnapshot systemsSnap) {
if (systemsSnap.connectionState == ConnectionState.waiting) {
return Container(
height: 100.0,
width: 200.0,
child: Text("Please wait..."),
);
} else if (systemsSnap.hasError) {
return Container(
height: 100.0,
width: 200.0,
child: Text("Oops! There was an error!"),
);
}
return Row(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width - 256.0,
child: ListView.builder(
shrinkWrap: true,
itemCount: systemsSnap.data.length,
itemBuilder: (context, index) {
Map<String, dynamic> system = systemsSnap.data[index];
String systemName = system["system"];
return Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(0.0, 16.0, 0.0, 16.0),
width: 150.0,
decoration: BoxDecoration(
border: Border(
right: BorderSide(
color: Colors.black12,
width: 1.0,
),
bottom: BorderSide(
color: Colors.black12,
width: 1.0,
),
),
),
child: Column(
children: <Widget>[
Align(
alignment: Alignment.center,
child: RotatedBox(
quarterTurns: -1,
child: Text(
systemName.toUpperCase(),
style: TextStyle(
fontSize: 15.0,
letterSpacing: 1.2,
),
),
),
),
Padding(
padding: EdgeInsets.all(12.0),
),
Align(
alignment: Alignment.center,
child: FloatingActionButton(
child: Icon(Icons.image),
),
),
],
),
),
],
);
},
),
),
],
);
},
),
],
);
},
),
),
),
Container(
padding: EdgeInsets.fromLTRB(16.0, 16.0, 0.0, 0.0),
child: Column(
children: <Widget>[
Container(
child: FloatingActionButton(
child: Icon(Icons.photo_library),
onPressed: () {
//TODO action
},
),
),
Padding(
padding: EdgeInsets.all(10.0),
),
Container(
child: FloatingActionButton(
child: Icon(Icons.library_books),
onPressed: () {
//TODO action
},
),
),
Padding(
padding: EdgeInsets.all(10.0),
),
Container(
child: FloatingActionButton(
child: Icon(Icons.list),
onPressed: () {
//TODO action
},
),
),
Padding(
padding: EdgeInsets.all(10.0),
),
Container(
child: FloatingActionButton(
child: Icon(Icons.history),
onPressed: () {
//TODO action
},
),
),
],
),
),
],
),
],
),
),
);
}
}
The above code is ready to be pasted into the main.dart file and preview on a the virtual device (preferably tablet).
So far I have tried the solutions I found on these posts to no avail:
- Make container widget fill parent vertically
- Flutter Container height same as parent height
- Flutter expand Container to fill remaining space of Row
- The equivalent of wrap_content and match_parent in flutter?
Since the Row that contains the section Container also has a ListView being generated with the FutureBuilder, the height of the Row automatically expands to fit the ListView. I also want the section Container to expand to the same height as the how the Row widget is expanding; i.e., The bottom border of the section Container that says FRONT, should be aligned with the bottom border of the Hight Voltage system and the right border of the FRONT section Container, should go all the way to the top.
I already spent 3 days without a resolution.
Edit
I have tried the suggestion on the answer provided by #MaadhavSharma but I get the following exception:
════════ Exception Caught By rendering library ════════════════════════════
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.

I changed a little the structure to make it work, here is the entire build() method:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 275.0,
child: DropdownButton(
value: dropdownValue,
hint: Text("Choose Build"),
isExpanded: true,
items: buildItems
.map<Map<String, String>>((Map<String, dynamic> item) {
String id = item["id"].toString();
String name = item["vehicleModel"] + " " + item["vehicleNumber"];
return {"id": id, "name": name};
})
.toList()
.map<DropdownMenuItem<String>>((Map<String, String> item) {
return DropdownMenuItem<String>(
value: item["id"],
child: Text(item["name"]),
);
})
.toList(),
onChanged: (String newValue) {
getSections();
setState(() {
dropdownValue = newValue;
});
}),
),
],
),
Row(
children: <Widget>[
Container(
width: 150.0,
height: 60.0,
color: Colors.black,
child: Align(
alignment: Alignment.center,
child: Text(
"SECTION",
style: TextStyle(
color: Colors.white,
fontSize: 17.3,
letterSpacing: 1.35,
),
),
),
),
Container(
width: 150.0,
height: 60.0,
color: Color(0xff444444),
child: Align(
alignment: Alignment.center,
child: Text(
"SYSTEM",
style: TextStyle(
color: Colors.white,
fontSize: 17.3,
letterSpacing: 1.35,
),
),
),
),
Expanded(
child: Container(
height: 60.0,
padding: EdgeInsets.only(left: 36.0),
margin: EdgeInsets.only(right: 72.0),
color: Color(0xff666666),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"TASK",
style: TextStyle(
color: Colors.white,
fontSize: 17.3,
letterSpacing: 1.35,
),
),
),
),
)
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(border: Border.all(color: Colors.black12, width: 1.0, style: BorderStyle.solid)),
height: MediaQuery.of(context).size.height - 225,
child: ListView.builder(
shrinkWrap: true,
itemCount: buildSections.length,
itemBuilder: (BuildContext context, int index) {
String section = buildSections[index]["section"] != null ? buildSections[index]["section"] : "";
String buildSectionId = buildSections[index]["id"].toString();
return IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
width: 150.0,
decoration: BoxDecoration(
color: Colors.green,
border: Border(
right: BorderSide(
color: Colors.black12,
width: 1.0,
),
bottom: BorderSide(
color: Colors.black12,
width: 1.0,
),
),
),
padding: EdgeInsets.fromLTRB(0.0, 16.0, 0.0, 16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Align(
alignment: Alignment.center,
child: Center(
child: RotatedBox(
quarterTurns: -1,
child: Text(
section.toUpperCase(),
style: TextStyle(
fontSize: 15.0,
letterSpacing: 1.2,
),
),
),
),
),
Padding(
padding: EdgeInsets.all(12.0),
),
Align(
alignment: Alignment.center,
child: FloatingActionButton(
child: Icon(Icons.image),
),
),
],
),
),
FutureBuilder(
future: getSystems(buildSectionId),
builder: (BuildContext context, AsyncSnapshot systemsSnap) {
if (systemsSnap.connectionState == ConnectionState.waiting) {
return Container(
height: 100.0,
width: 200.0,
child: Text("Please wait..."),
);
} else if (systemsSnap.hasError) {
return Container(
height: 100.0,
width: 200.0,
child: Text("Oops! There was an error!"),
);
}
return
Container(
width: MediaQuery.of(context).size.width - 256.0,
child: Column(
children: systemsSnap.data.map<Widget>((e) => Container(
padding: EdgeInsets.fromLTRB(0.0, 16.0, 0.0, 16.0),
width: 150.0,
decoration: BoxDecoration(
border: Border(
right: BorderSide(
color: Colors.black12,
width: 1.0,
),
bottom: BorderSide(
color: Colors.black12,
width: 1.0,
),
),
),
child: Column(
children: <Widget>[
Align(
alignment: Alignment.center,
child: RotatedBox(
quarterTurns: -1,
child: Text(
e["system"].toUpperCase(),
style: TextStyle(
fontSize: 15.0,
letterSpacing: 1.2,
),
),
),
),
Padding(
padding: EdgeInsets.all(12.0),
),
Align(
alignment: Alignment.center,
child: FloatingActionButton(
child: Icon(Icons.image),
),
),
],
),
)).toList(),
),
);
// Row(
// children: <Widget>[
// Container(
// width: MediaQuery.of(context).size.width - 256.0,
// child: ListView.builder(
// shrinkWrap: true,
// itemCount: systemsSnap.data.length,
// itemBuilder: (context, index) {
// Map<String, dynamic> system = systemsSnap.data[index];
// String systemName = system["system"];
// return Row(
// children: <Widget>[
//
// ],
// );
// },
// ),
// ),
// ],
// );
},
),
],
),
);
},
),
),
),
Container(
padding: EdgeInsets.fromLTRB(16.0, 16.0, 0.0, 0.0),
child: Column(
children: <Widget>[
Container(
child: FloatingActionButton(
child: Icon(Icons.photo_library),
onPressed: () {
//TODO action
},
),
),
Padding(
padding: EdgeInsets.all(10.0),
),
Container(
child: FloatingActionButton(
child: Icon(Icons.library_books),
onPressed: () {
//TODO action
},
),
),
Padding(
padding: EdgeInsets.all(10.0),
),
Container(
child: FloatingActionButton(
child: Icon(Icons.list),
onPressed: () {
//TODO action
},
),
),
Padding(
padding: EdgeInsets.all(10.0),
),
Container(
child: FloatingActionButton(
child: Icon(Icons.history),
onPressed: () {
//TODO action
},
),
),
],
),
),
],
),
],
),
),
);
}
Basically I changed the ListView of the second element of the Row for a Column, since it already was inside a ListView and that was making it have double scroll and the heights weren't expanding the height of the row properly, and also I wrapped the Row inside an IntrinsicHeight and put crossAxisAlignment: CrossAxisAlignment.stretch to the Row so the content will fit the height of the Row.
The use of IntrinsicHeight is expensive, but I don't see another solution for the way you structured the widgets. I recommend you to try to optimize all the structure so you could find a better and optimal solution.

If you want to stretch the Container to match its parent, use double.infinity for the height and width properties
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Container as a layout')),
body: Container(
height: double.infinity,
width: double.infinity,
color: Colors.yellowAccent,
child: Text("Hi"),
),
);
}

The trick is to use constraints: BoxConstraints.expand() in some of your containers that you want to expand to fill the row height.
Try something like this:
Scaffold(
appBar: AppBar(
title: Text("Title"),
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
color: Colors.yellow,
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
constraints: BoxConstraints.expand(),
color: Colors.blue,
child: Text("box 1")),
),
Expanded(
flex: 2,
child: Container(
constraints: BoxConstraints.expand(),
color: Colors.red,
child: Column(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
padding:
EdgeInsets.fromLTRB(0, 0, 0, 0),
color: Colors.yellow,
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
constraints:
BoxConstraints.expand(),
color: Colors.lightGreen,
child: Text("box 2")),
),
Expanded(
flex: 2,
child: Container(
constraints:
BoxConstraints.expand(),
color: Colors.lightBlue,
child: Text("box 3")),
),
],
),
),
),
Expanded(
flex: 1,
child: Container(
padding:
EdgeInsets.fromLTRB(0, 0, 0, 0),
color: Colors.yellow,
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
constraints:
BoxConstraints.expand(),
color: Colors.purple,
child: Text("box 4")),
),
Expanded(
flex: 2,
child: Container(
constraints:
BoxConstraints.expand(),
color: Colors.orange,
child: Text("")),
),
],
),
),
),
],
)),
),
],
),
),
),
Expanded(
flex: 1,
child: Container(
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
color: Colors.yellow,
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
constraints: BoxConstraints.expand(),
color: Colors.yellow,
child: Text("box 5")),
),
Expanded(
flex: 2,
child: Container(
constraints: BoxConstraints.expand(),
color: Colors.green,
child: Text("box 6")),
),
],
),
),
),
],
)),
);

I think you will need to use some fixed heights since you are using ListView and FutureBuiulders. If you can get rid of FutureBuilders, you can probably achieve dynamic heights. Notice the hright of 320 on the parent row and height of 160 on child rows.
But have a look at this:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Assemblers Tasks',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.deepOrange,
),
home: MyHomePage(title: 'Assembly Tasks'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String dropdownValue;
List<Map<String, dynamic>> buildItems = [];
getBuilds() {
List<Map<String, dynamic>> items = [];
items.add({"id": 10, "vehicleModel": "A10", "vehicleNumber": "TEST-00010"});
setState(() {
buildItems = items;
});
}
List<Map<String, dynamic>> buildSections = [];
getSections() {
List<Map<String, dynamic>> items = [];
items.add({
"id": 5,
"section": "Front",
});
items.add({
"id": 15,
"section": "Rear",
});
setState(() {
buildSections = items;
});
}
Future<List<Map<String, dynamic>>> getSystems(String buildSectionId) async {
List<Map<String, dynamic>> items = [];
if (int.parse(buildSectionId) == 5) {
items.add({
"id": 4,
"system": "Hydraulics",
});
items.add({
"id": 20,
"system": "High Voltage",
});
}
return items;
}
#override
void initState() {
getBuilds();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 275.0,
child: DropdownButton(
value: dropdownValue,
hint: Text("Choose Build"),
isExpanded: true,
items: buildItems
.map<Map<String, String>>(
(Map<String, dynamic> item) {
String id = item["id"].toString();
String name = item["vehicleModel"] +
" " +
item["vehicleNumber"];
return {"id": id, "name": name};
})
.toList()
.map<DropdownMenuItem<String>>(
(Map<String, String> item) {
return DropdownMenuItem<String>(
value: item["id"],
child: Text(item["name"]),
);
})
.toList(),
onChanged: (String newValue) {
getSections();
setState(() {
dropdownValue = newValue;
});
}),
),
],
),
Row(
children: <Widget>[
Container(
width: 150.0,
height: 60.0,
color: Colors.black,
child: Align(
alignment: Alignment.center,
child: Text(
"SECTION",
style: TextStyle(
color: Colors.white,
fontSize: 17.3,
letterSpacing: 1.35,
),
),
),
),
Container(
width: 150.0,
height: 60.0,
color: Color(0xff444444),
child: Align(
alignment: Alignment.center,
child: Text(
"SYSTEM",
style: TextStyle(
color: Colors.white,
fontSize: 17.3,
letterSpacing: 1.35,
),
),
),
),
Expanded(
child: Container(
height: 60.0,
padding: EdgeInsets.only(left: 36.0),
margin: EdgeInsets.only(right: 72.0),
color: Color(0xff666666),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"TASK",
style: TextStyle(
color: Colors.white,
fontSize: 17.3,
letterSpacing: 1.35,
),
),
),
),
)
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black12,
width: 1.0,
style: BorderStyle.solid)),
height: MediaQuery.of(context).size.height - 225,
child: ListView.builder(
shrinkWrap: true,
itemCount: buildSections.length,
itemBuilder: (BuildContext context, int index) {
String section = buildSections[index]["section"] != null
? buildSections[index]["section"]
: "";
String buildSectionId =
buildSections[index]["id"].toString();
return Container(
height: 320,
child: Row(
children: <Widget>[
Container(
width: 120.0,
decoration: BoxDecoration(
border: Border(
right: BorderSide(
color: Colors.yellow,
width: 1.0,
),
bottom: BorderSide(
color: Colors.black12,
width: 1.0,
),
),
),
padding:
EdgeInsets.fromLTRB(0.0, 16.0, 0.0, 16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Align(
alignment: Alignment.center,
child: Center(
child: RotatedBox(
quarterTurns: -1,
child: Text(
section.toUpperCase(),
style: TextStyle(
fontSize: 15.0,
letterSpacing: 1.2,
),
),
),
),
),
Padding(
padding: EdgeInsets.all(12.0),
),
Align(
alignment: Alignment.center,
child: FloatingActionButton(
child: Icon(Icons.image),
),
),
],
),
),
Expanded(
child: Container(
color: Colors.orange,
child: false ? Text(" ") : FutureBuilder(
future: getSystems(buildSectionId),
builder: (BuildContext context,
AsyncSnapshot systemsSnap) {
if (systemsSnap.connectionState ==
ConnectionState.waiting) {
return Container(
height: 100.0,
width: 200.0,
child: Text("Please wait..."),
);
} else if (systemsSnap.hasError) {
return Container(
height: 100.0,
width: 200.0,
child: Text("Oops! There was an error!"),
);
}
return Row(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width -
256.0,
child: ListView.builder(
shrinkWrap: true,
itemCount: systemsSnap.data.length,
itemBuilder: (context, index) {
Map<String, dynamic> system =
systemsSnap.data[index];
String systemName = system["system"];
return Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
0.0, 16.0, 0.0, 16.0),
width: 50.0,
height: 160,
decoration: BoxDecoration(
color: Colors.yellow,
border: Border(
right: BorderSide(
color: Colors.red,
width: 1.0,
),
bottom: BorderSide(
color: Colors.black12,
width: 1.0,
),
),
),
child: Column(
children: <Widget>[
Align(
alignment:
Alignment.center,
child: RotatedBox(
quarterTurns: -1,
child: Text(
systemName
.toUpperCase(),
style: TextStyle(
fontSize: 15.0,
letterSpacing: 1.2,
),
),
),
),
],
),
),
],
);
},
),
),
],
);
},
),
),
),
],
),
);
},
),
),
),
Container(
padding: EdgeInsets.fromLTRB(16.0, 16.0, 0.0, 0.0),
child: Column(
children: <Widget>[
Container(
child: FloatingActionButton(
child: Icon(Icons.photo_library),
onPressed: () {
//TODO action
},
),
),
Padding(
padding: EdgeInsets.all(10.0),
),
Container(
child: FloatingActionButton(
child: Icon(Icons.library_books),
onPressed: () {
//TODO action
},
),
),
Padding(
padding: EdgeInsets.all(10.0),
),
Container(
child: FloatingActionButton(
child: Icon(Icons.list),
onPressed: () {
//TODO action
},
),
),
Padding(
padding: EdgeInsets.all(10.0),
),
Container(
child: FloatingActionButton(
child: Icon(Icons.history),
onPressed: () {
//TODO action
},
),
),
],
),
),
],
),
],
),
),
);
}
}

Related

how to use multi scroll in one screen -Flutter

I want to create an web ui in flutter like trello in that I want one horizontal primary scroll and one vertical secondary scroll but I am not able to scroll vertically in column I attach what I want to create and my code and if you still not understand please let me know
Here is my code :-
class PlaningWeekScreenWeb extends StatelessWidget {
const PlaningWeekScreenWeb({Key? key}) : super(key: key);
// Use this for set width of card and row in list
final double cardWidth = 180.0;
#override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(child: _getSideMenu()),
Container(
height: Get.height,
width: 1,
color: scrollBarColor,
),
Expanded(
child: _getMainScreen(),
flex: 6,
),
],
);
}
Widget _getMainScreen() {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: ListView.builder(
itemCount: 4,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.horizontal,
padding: EdgeInsets.zero,
itemBuilder: (context, i) {
return Row(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
width: cardWidth,
child: Row(
children: [
(10.0).addWSpace(),
"29".h3(
size: 25,
weight: FontWeight.w700,
color: GrayColor),
(5.0).addWSpace(),
Expanded(
child: "Sun".h3(
color: GrayColor,
weight: FontWeight.w400,
size: 15)),
(10.0).addWSpace(),
],
),
),
Container(
color: scrollBarColor,
height: 1,
width: cardWidth,
),
SizedBox(
width: cardWidth,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SingleChildScrollView(
primary: false,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
PlaningWeekCard(
device: Device.Web,
onTap: () {},
width: cardWidth,
),
PlaningWeekCard(
device: Device.Web,
onTap: () {},
width: cardWidth,
),
PlaningWeekCard(
device: Device.Web,
onTap: () {},
width: cardWidth,
),
PlaningWeekCard(
device: Device.Web,
onTap: () {},
width: cardWidth,
),
PlaningWeekCard(
device: Device.Web,
onTap: () {},
width: cardWidth,
),
PlaningWeekCard(
device: Device.Web,
onTap: () {},
width: cardWidth,
),
],
),
),
Container(
height: Get.height,
width: 1,
color: scrollBarColor,
),
],
),
),
],
),
],
);
}),
);
}
Widget _getSideMenu() {
return Container(
height: Get.height,
// width: 220,
child: SingleChildScrollView(
padding: EdgeInsets.zero,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
"Employers".h3(weight: FontWeight.w700, size: 22),
(10.0).addHSpace(),
PerytonSearchField(
hintText: 'Name',
),
(10.0).addHSpace(),
ExpansionTile(
title: Row(
children: [
PerytonCheckBox(val: false),
(5.0).addWSpace(),
Expanded(child: "Codonnier Offieces".expansionTileTittleWeb())
],
),
children: [
_getRow("Norway office"),
_getRow("Surat office"),
_getRow("Bardoli office"),
_getRow("Usa office"),
],
),
(10.0).addHSpace(),
ExpansionTile(
title: Row(
children: [
PerytonCheckBox(val: false),
(5.0).addWSpace(),
Expanded(child: "Codonnier Branches".expansionTileTittleWeb())
],
),
children: [
_getRow("Amsterdam office"),
_getRow("Surat office"),
_getRow("Suart-6 office"),
_getRow("california office"),
],
),
(10.0).addHSpace(),
ExpansionTile(
title: Row(
children: [
PerytonCheckBox(val: false),
(5.0).addWSpace(),
Expanded(
child: "Codonnier sub branches".expansionTileTittleWeb())
],
),
children: [
_getRow("van gogh branch"),
_getRow("Mota varacha branch"),
_getRow("vesu branch"),
_getRow("san francisco office"),
],
),
(10.0).addHSpace(),
"Workers".h3(weight: FontWeight.w700, size: 22),
(10.0).addHSpace(),
PerytonSearchField(
hintText: 'Name',
),
(10.0).addHSpace(),
_getRow("Harsh codonnier"),
(10.0).addHSpace(),
_getRow("Dipak codonnier"),
(10.0).addHSpace(),
_getRow("Subham codonnier"),
(10.0).addHSpace(),
_getRow("ravi codonnier"),
(10.0).addHSpace(),
],
).pSymmetricOnly(horizontal: 10),
),
);
}
Widget _getRow(String name) {
return Row(
children: [
PerytonCheckBox(val: false),
(5.0).addWSpace(),
Expanded(child: name.expansionTileWeb())
],
);
}
}
Here is my card widget:-
class PlaningDayCard extends StatelessWidget {
PlaningDayCard(
{Key? key,
required this.device,
required this.onTap,
required this.width})
: super(key: key);
final Device device;
final double width;
final Function onTap;
#override
Widget build(BuildContext context) {
return ResponsiveWidget(
mobile: _getMobileCard(),
tablet: _getWebCard(),
desktop: _getWebCard(),
device: device);
}
Widget _getWebCard() {
return SizedBox(
width: width - 2,
child: Card(
color: Colors.white,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white, width: 0.0),
borderRadius: BorderRadius.circular(15),
),
child: Material(
borderRadius: BorderRadius.circular(15),
clipBehavior: Clip.antiAlias,
color: Colors.transparent,
child: InkWell(
onTap: () {
onTap.call();
},
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: "Scrubbing sinks, tubs, showers"
.h2(weight: FontWeight.w700, size: 15),
),
],
),
(6.0).addHSpace(),
Row(
children: [
ImageAssetIconWithColor(
color: GrayColor,
size: 15,
image: ImageIcons.icTriangle,
),
(8.0).addWSpace(),
Expanded(
child: "Main Office".h2(
weight: FontWeight.w500,
color: GrayColor,
size: 14),
),
],
),
(8.0).addWSpace(),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
"09:00—13:00".h2(
weight: FontWeight.w700, color: GrayColor, size: 13),
],
)
],
).pSymmetricOnly(vertical: 5, horizontal: 6),
),
)),
);
}
Widget _getMobileCard() {
return SizedBox(
width: width - 2,
child: Card(
color: Colors.white,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white, width: 0.0),
borderRadius: BorderRadius.circular(15.sp),
),
child: Material(
borderRadius: BorderRadius.circular(15.sp),
clipBehavior: Clip.antiAlias,
color: Colors.transparent,
child: InkWell(
onTap: () {
onTap.call();
},
child: Column(
children: [],
),
),
)),
);
}
}
Complete Running Code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Container(
height: 200,
child: GridView.count(
scrollDirection: Axis.horizontal,
crossAxisCount: 1 ,
children: List.generate(50,(index){
return Container(
child: Card(
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: <Widget>[
Container(
width: 50,
height: 100,
color: Colors.yellowAccent,
),
Container(
width: 50,
height: 100,
color: Colors.blue,
),
Container(
width: 50,
height: 100,
color: Colors.green,
),
Container(
width: 50,
height: 100,
color: Colors.red,
),Container(
width: 50,
height: 100,
color: Colors.yellowAccent,
),
Container(
width: 50,
height: 100,
color: Colors.blue,
),
Container(
width: 50,
height: 100,
color: Colors.green,
),
Container(
width: 50,
height: 100,
color: Colors.red,
)
],
),
color: Colors.amber,
),
);
}),
),
) ),
),
),
);
}
}
Complete Tested Code
import 'dart:math';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
class TrelloExample extends StatefulWidget {
const TrelloExample({Key? key}) : super(key: key);
#override
State<TrelloExample> createState() => _TrelloExampleState();
}
class _TrelloExampleState extends State<TrelloExample> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Padding(
padding: const EdgeInsets.only(top: 64.0),
child: ScrollConfiguration(
behavior: ScrollConfiguration.of(context).copyWith(
dragDevices: {
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
},
),
child: SingleChildScrollView(
physics: const ClampingScrollPhysics(),
scrollDirection: Axis.horizontal,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: List.generate(
16,
(index) => SingleChildScrollView(
physics: const ClampingScrollPhysics(),
child: Padding(
padding: EdgeInsets.only(
right: 16.0, left: index == 0 ? 16.0 : 0.0),
child: Column(
children: List.generate(
index % 2 == 1
? 16
: index % 3 == 1
? 8
: index % 1 == 1
? 4
: 6,
(index) => Padding(
padding: const EdgeInsets.only(bottom: 16.0),
child: Material(
elevation: 4.0,
child: Container(
padding: const EdgeInsets.all(38.0),
color: Color(
(Random().nextDouble() * 0xFFFFFF).toInt())
.withOpacity(1.0),
child: Text(
"Trello Ticket Item $index",
style: const TextStyle(
fontSize: 16.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
),
),
),
),
),
),
),
),
),
),
),
);
}
}
You can achieve this with more than one ways. But I think the simplest way is that make Row as parent widget put all the ListView in Row after wrapping every ListView by Expanded widget.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0),
child: Row(
children: <Widget>[
Expanded(
child: ListView.separated(
itemCount: 10,
controller: ScrollController(),
separatorBuilder: (_, __) => const SizedBox(height: 10),
itemBuilder: ((context, index) => Container(
height: 80,
width: double.infinity,
color: Colors.red,
)),
),
),
const SizedBox(width: 10),
Expanded(
child: ListView.separated(
controller: ScrollController(),
itemCount: 2,
separatorBuilder: (_, __) => const SizedBox(height: 10),
itemBuilder: ((context, index) => Container(
height: 100,
width: double.infinity,
color: Colors.yellow,
)),
),
),
const SizedBox(width: 10),
Expanded(
child: ListView.separated(
controller: ScrollController(),
itemCount: 6,
separatorBuilder: (_, __) => const SizedBox(height: 10),
itemBuilder: ((context, index) => Container(
height: 70,
width: double.infinity,
color: Colors.green,
)),
),
)
],
),
),
);
}
Wrap with SingleChildScrollView over every page you want to scroll.
And also mention the scrollDirection: Axis.vertical.
I hope it works! :)
First must wrap it with a single scroll child view.
Then wrap it in rows,
Then wrap it in a ListView
Use expanded so everything can be seen.
I hope this works for you.
class myScroll extends MaterialScrollBehavior {
#override
Set<PointerDeviceKind> get dragDevices => {
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
};
}

How to use Wrap widget inside column widget in flutter

I want to display items in a row using wrap widget, my code stack look like this
column>padding>wrap
and its output is this
i want them i row like in this tutorial
here is the code:
customExpansionTile(context, "Token Distribution Time", true,
Icon(Icons.info_rounded, color: HexColor("#5344ed")), <Widget>[
SizedBox10(),
Container(
// padding: EdgeInsets.only(right: 70),
child: Row(
children: [
Expanded(
child: SizedBox(
child: ListTile(
//font change
title: ListView.builder(
itemCount: checkBoxListTileModel.length,
itemBuilder: (BuildContext context, int index) {
return new Card(
child: new Container(
padding: new EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
new CheckboxListTile(
controlAffinity:
ListTileControlAffinity.leading,
activeColor: HexColor("#5344ed"),
dense: true,
//font change
title: new Text(
checkBoxListTileModel[index].title,
value: checkBoxListTileModel[index]
.isCheck,
secondary: Padding(
padding: EdgeInsets.only(left: 1),
child: Container(
child:
checkBoxListTileModel[index].isCheck ==true?
Container(
child: TextButton(
onPressed: () {
_getSelectedRowInfo(
checkBoxListTileModel[index].title);
},
child: Center(
child: Text(
"Pick time",),
),
)
: null),
),
onChanged: (bool? val) {
itemChange1(val!, index);
}),
Padding(
padding: const EdgeInsets.fromLTRB(0, 8, 160, 0),
//here i am using wrap widget
child: Wrap(
children:[
Container(
child:checkBoxListTileModel[index]
.isCheck? Tags(
itemCount: _timingTagsList.length, // required
itemBuilder: (int index){
final item = _timingTagsList[index];
return ItemTags(
key: Key(index.toString()),
color:HexColor("#5344ed"),
index: index, // required
title: _timingTagsList[0],
textStyle: TextStyle( fontSize: 14, ),
combine: ItemTagsCombine.withTextBefore,
removeButton: ItemTagsRemoveButton(
onRemoved: (){
setState(() {
_timingTagsList.removeAt(index);
});
return true;
},
),
onPressed: (item) => print(item),
onLongPressed: (item) => print(item),
);
},):Padding(
padding: const EdgeInsets.only(left: 70),
child:
Row(crossAxisAlignment: CrossAxisAlignment.center, children: []))
),
]),
)]),
),
);
}),
))),
SizedBox(
width: 10,
),
],
))
User direction in Horizontal
Wrap(
direction:Axis.horizontal,
children:[
//.....
]
)
Try below code hope its helpful to you refer Wrap widget here
Wrap(
// direction: Axis.vertical,
children: <Widget>[
Container(
color: Colors.blue,
width: 100,
height: 100,
child: Center(
child: Text(
"W1",
textScaleFactor: 2.5,
),
),
),
Container(
color: Colors.red,
width: 100,
height: 100,
child: Center(
child: Text(
"W2",
textScaleFactor: 2.5,
),
),
),
Container(
color: Colors.teal,
width: 100,
height: 100,
child: Center(
child: Text(
"W3",
textScaleFactor: 2.5,
),
),
),
Container(
color: Colors.indigo,
width: 100,
height: 100,
child: Center(
child: Text(
"W4",
textScaleFactor: 2.5,
),
),
),
Container(
color: Colors.orange,
width: 100,
height: 100,
child: Center(
child: Text(
"W5",
textScaleFactor: 2.5,
),
),
),
],
)
Your result screen horizontal Axis direction ->
Your Screen vertical Axis Direction->

Flutter: How to control a PageView by GetxController?

Subject: PageView and GetX
I'm having trouble detaching the controls on a PageView widget from the HomeView module. I have a GlobalController with its respective GlobalBinding that are instantiated when opening the HomeView. I would like to take the setPage(int page) method to the GlobalController that would eventually make the HomeView's PageView change pages. I don't know how to get PageController from PageView to GlobalController in order to make it work. How should I proceed?
Something Like this?
am using pageview in onboarding
class Onboard{
final headTitle;
final secondarytitle;
final discription;
final pngimage;
Onboardslist(this.headTitle, this.secondarytitle, this.discription, this.pngimage);
}
then for the controller
class OnboardController extends GetxController{
var selectedPagexNumber = 0.obs;
bool get isLastPage => selectedPagexNumber.value == onBoardPages.length -1;
var pageControll = PageController();
forwardAct()
{
if(isLastPage) Get.offNamedUntil(signin, (route)=> false);
else pageControll.nextPage(duration: 300.milliseconds, curve: Curves.ease);
}
List<Onboardslist> onBoardPages =
[
Onboardslist("title",
"short description",
"long description",
imageString),
Onboardslist("title",
"short description",
"long description",
imageString),
Onboardslist("title",
"short description",
"long description",
imageString),
Onboardslist("title",
"short description",
"long description",
imageString)
];
}
then for the view i did was simply like this
class Onboarding extends StatelessWidget {
final yourController= OnboardController();
#override
Widget build(BuildContext context) {
SizeXGet().init(context);
return Scaffold(
backgroundColor: decent_white,
appBar: AppBarCustom(
title: 'Skip',
button: ()=>Get.offNamedUntil(signin,(route)=>false),
),
body: WillPopScope(
onWillPop: () async => false,
child: SafeArea(
child: Stack(
children: [
PageView.builder(
controller: yourController.pageControll,
onPageChanged: yourController.selectedPagexNumber,
itemCount: yourController.onBoardPages.length,
itemBuilder: (context, index)
=>Padding(
padding: const EdgeInsets.only(left: 10,right: 10),
child: Container(
child: SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: getHeight(150),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(left: 20,right: 20),
child: Text(yourController.onBoardPages[index].headTitle,
style: TextStyle(
color: darkish_color,
fontSize: getHeight(20),
fontFamily: 'Metropolis-SemiBold' ,
fontWeight: FontWeight.bold
),),
),
SizedBox(height: 15,),
Padding(
padding: const EdgeInsets.only(left: 50,right: 50),
child: Text(yourController.onBoardPages[index].secondarytitle,
style: TextStyle(
color: not_sopure_black,
fontSize: getHeight(26),
fontFamily: 'Metropolis-Bold' ,
fontWeight: FontWeight.bold
),
),
),
SizedBox(height: 15,),
Padding(
padding: const EdgeInsets.only(left: 40,right: 40),
child: Text(yourController.onBoardPages[index].discription,
style: TextStyle(
color: not_sopure_black,
fontSize: getHeight(15),
fontFamily: 'Metropolis-Regular' ,
),
),
),
],
),
),
SizedBox(height: 15,),
Image.asset(yourController.onBoardPages[index].pngimage),
],
),
),
),
),
),
],
),
),
),
bottomNavigationBar: BottomAppBar(
color: Colors.transparent,
elevation: 0,
child: Container(
height: 75,
width: MediaQuery.of(context).size.width,
child: Padding(
padding: const EdgeInsets.only(left: 25,right:25,),
child: Container(
width: MediaQuery.of(context).size.width,
child: Stack(
children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
child: Row(
children: List.generate(yourController.onBoardPages.length,
(index)=>Obx(()=>
AnimatedContainer(
duration: Duration(milliseconds: 200),
margin: EdgeInsets.only(right: 5),
height: 10,
width: yourController.selectedPagexNumber.value == index ? 20 : 10,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(60),
color: yourController.selectedPagexNumber.value == index
? darkish_color
: not_sopure_black,),
),
)),
),
),
),
Align(
alignment: Alignment.centerRight,
child: Container(
width: 130,
height: 52,
child: RaisedButton(
elevation: 0,
onPressed: yourController.forwardAct,
splashColor: not_sopure_black,
color: darkish_color,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100)
),
child: Obx(() =>
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(yourController.isLastPage ? 'Next' : 'Next',
style: TextStyle(
color: Colors.white,
fontFamily: 'Metropolis-Semibold',
fontSize: 16,
),
),
],
),
),
),
),
)
],
),
),
),
),
),
);
}
}

flutter click tab hide under container

I am a beginner of flutter.
I am developing a flutter app.
this is my flutter app screen.
I want to hide the marked part as blue when I tap the bookmark tab bar.
I have tried several methods, but I could not achieve my goal.
I really need your helps.
I attached my whole code.
import 'package:botanic_flutter/login_page.dart';
import 'package:botanic_flutter/main.dart';
import 'package:botanic_flutter/root_page.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:botanic_flutter/custom_color_scheme.dart';
import 'package:google_sign_in/google_sign_in.dart';
class AccountPage extends StatefulWidget {
final String userUid;
AccountPage(this.userUid);
#override
_AccountPageState createState() => _AccountPageState();
}
class _AccountPageState extends State<AccountPage>
with SingleTickerProviderStateMixin {
final GoogleSignIn _googleSignIn = GoogleSignIn();
final FirebaseAuth _Auth = FirebaseAuth.instance;
FirebaseUser _currentUser;
TabController _controller;
ScrollController _scrollController;
#override
void initState() {
super.initState();
_scrollController = ScrollController();
_controller = TabController(length: 2, vsync: this);
}
#override
void dispose() {
_controller.dispose();
_scrollController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
bottom: true,
child: DefaultTabController(
length: 2,
child: NestedScrollView(
controller: _scrollController,
headerSliverBuilder: (context, isScrolled) {
return <Widget>[
SliverList(
delegate: SliverChildListDelegate([
_detailedBody()
]),
),
SliverPersistentHeader(
pinned: true,
delegate: TabBarDelegate(
Column(
children: <Widget>[
TabBar(
unselectedLabelColor: Theme.of(context).colorScheme.greyColor,
labelColor: Theme.of(context).colorScheme.mainColor,
controller: _controller,
indicatorColor: Theme.of(context).colorScheme.mainColor,
tabs: [
Container(
height: 80,
padding: EdgeInsets.only(top: 10),
child: Tab(
icon: const Icon(Icons.home,
),
text: 'PLANTS',
),
),
Container(
height: 80,
padding: EdgeInsets.only(top: 10),
child: Tab(
icon: const Icon(Icons.bookmark_border,
),
text: 'BOOKMARK',
),
)
],
),
_bottomButtons(tabindi)
],
),
),
),
];
},
body: SizedBox(
height: MediaQuery.of(context).size.height,
child: TabBarView(
controller: _controller,
children: <Widget>[
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 1.0,
mainAxisSpacing: 1.0,
crossAxisSpacing: 1.0),
itemCount: notes.length,
itemBuilder: (context, index) => Card(
child: Image.network(notes[index],
fit: BoxFit.cover,
),
),
),
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 1.0,
mainAxisSpacing: 1.0,
crossAxisSpacing: 1.0),
itemCount: notes.length,
itemBuilder: (context, index) => Card(
child: Image.network(notes[index],
fit: BoxFit.cover,
),
),
)
],
),
),
),
),
),
);
}
Widget _detailedBody() {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width * 3 / 4,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
'http://www.korea.kr/newsWeb/resources/attaches/2017.08/03/3737_cp.jpg'),
),
),
),
Container(
transform: Matrix4.translationValues(0.0, -41.0, 0.0),
child: Column(
children: <Widget>[
Stack(
alignment: Alignment.center,
children: <Widget>[
SizedBox(
width: 90.0,
height: 90.0,
child: CircleAvatar(
backgroundColor: Colors.white,
),
),
SizedBox(
width: 82.0,
height: 82.0,
child: CircleAvatar(
backgroundImage: NetworkImage(
'https://steemitimages.com/DQmS1gGYmG3vL6PKh46A2r6MHxieVETW7kQ9QLo7tdV5FV2/IMG_1426.JPG')),
),
Container(
width: 90.0,
height: 90.0,
alignment: Alignment.bottomRight,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
SizedBox(
width: 28.0,
height: 28.0,
child: FloatingActionButton(
onPressed: null,
backgroundColor: Colors.white,
//child: Icon(Icons.add),
),
),
SizedBox(
width: 25.0,
height: 25.0,
child: FloatingActionButton(
onPressed: null,
backgroundColor:
Theme.of(context).colorScheme.mainColor,
child: Icon(Icons.add),
),
),
],
))
],
),
Padding(padding: EdgeInsets.all(5.0)),
Text(
'nickname',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 24.0),
),
Padding(padding: EdgeInsets.all(5.0)),
Text(
'introduce',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15.0),
),
Padding(padding: EdgeInsets.all(9.0)),
FlatButton(
onPressed: () {
signOutWithGoogle().then((_) {
Navigator.popUntil(context, ModalRoute.withName('/'));
});
},
color: Theme.of(context).colorScheme.mainColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0)),
child: Text('로그아웃'),
),
Padding(padding: EdgeInsets.all(9.0)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Column(
children: <Widget>[
Text(
'0',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16.0),
),
Text(
'식물수',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20.0),
),
],
),
Column(
children: <Widget>[
Text(
'0',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16.0),
),
Text(
'팔로워',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20.0),
),
],
),
Column(
children: <Widget>[
Text(
'0',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16.0),
),
Text(
'팔로잉',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20.0),
),
],
)
],
)
],
),
),
],
);
}
var tabindi = 0;
Widget _bottomButtons(tabindi) {
print(tabindi);
return tabindi == 0
? Container(
child: Row(
children: <Widget>[
Padding(
padding:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
child: Icon(
Icons.clear_all,
color: Colors.grey,
),
),
Container(
width: MediaQuery.of(context).size.width/3*1.4,
child: DropdownButton<String>(
isExpanded: true,
items: <String>['Foo', 'Bar'].map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
onChanged: (_) {},
),
),
Padding(
padding:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
child: Icon(
Icons.mode_edit,
color: Colors.grey,
),
),
Padding(
padding:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 1.0),
child: Icon(
Icons.delete,
color: Colors.grey,
),
),
Padding(
padding: EdgeInsets.all(4.0),
),
Container(
height: 30,
width: MediaQuery.of(context).size.width/4.5,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.mainColor,
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.shade200,
offset: Offset(2, 4),
blurRadius: 5,
spreadRadius: 2)
],
),
child: FlatButton(
child: Text(
"+식물등록",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 13,
color: Colors.white,
),
),
onPressed: () => {
},
),
),
],
),
)
:
Container();
}
List<String> notes = [
'https://steemitimages.com/DQmS1gGYmG3vL6PKh46A2r6MHxieVETW7kQ9QLo7tdV5FV2/IMG_1426.JPG',
'https://lh3.googleusercontent.com/proxy/BKvyuWq6b5apNOqvSw3VxB-QhezYHAoX1AptJdWPl-Ktq-Efm2gotbeXFtFlkr_ZPZmpEHc2BsKTC9oFQgzBimKsf5oRtTqOGdlO3MTfwiOT54E5m-lCtt6ANOMzmhNsYMGRp9Pg1NzjwMRUWNoWX0oJEFcnFvjOj2Rr4LtZpkXyiQFO',
'https://img1.daumcdn.net/thumb/R720x0.q80/?scode=mtistory2&fname=http%3A%2F%2Fcfile28.uf.tistory.com%2Fimage%2F2343174F58DBC14C2ECB8B',
'https://steemitimages.com/DQmS1gGYmG3vL6PKh46A2r6MHxieVETW7kQ9QLo7tdV5FV2/IMG_1426.JPG',
'https://lh3.googleusercontent.com/proxy/BKvyuWq6b5apNOqvSw3VxB-QhezYHAoX1AptJdWPl-Ktq-Efm2gotbeXFtFlkr_ZPZmpEHc2BsKTC9oFQgzBimKsf5oRtTqOGdlO3MTfwiOT54E5m-lCtt6ANOMzmhNsYMGRp9Pg1NzjwMRUWNoWX0oJEFcnFvjOj2Rr4LtZpkXyiQFO',
'https://img1.daumcdn.net/thumb/R720x0.q80/?scode=mtistory2&fname=http%3A%2F%2Fcfile28.uf.tistory.com%2Fimage%2F2343174F58DBC14C2ECB8B',
'https://steemitimages.com/DQmS1gGYmG3vL6PKh46A2r6MHxieVETW7kQ9QLo7tdV5FV2/IMG_1426.JPG',
'https://lh3.googleusercontent.com/proxy/BKvyuWq6b5apNOqvSw3VxB-QhezYHAoX1AptJdWPl-Ktq-Efm2gotbeXFtFlkr_ZPZmpEHc2BsKTC9oFQgzBimKsf5oRtTqOGdlO3MTfwiOT54E5m-lCtt6ANOMzmhNsYMGRp9Pg1NzjwMRUWNoWX0oJEFcnFvjOj2Rr4LtZpkXyiQFO',
'https://img1.daumcdn.net/thumb/R720x0.q80/?scode=mtistory2&fname=http%3A%2F%2Fcfile28.uf.tistory.com%2Fimage%2F2343174F58DBC14C2ECB8B',
];
Future<void> signOutWithGoogle() async {
// Sign out with firebase
await _Auth.signOut();
// Sign out with google
await _googleSignIn.signOut();
}
}
class TabBarDelegate extends SliverPersistentHeaderDelegate {
TabBarDelegate(this._tabBar);
final Column _tabBar;
#override
double get minExtent => 130.0;
#override
double get maxExtent => 130.0;
#override
Widget build(BuildContext context, double shrinkOffset,
bool overlapsContent) {
return Container(
color: Color(0xFFFAFAFA),
height: 130.0,
child: _tabBar
);
}
#override
bool shouldRebuild(covariant TabBarDelegate oldDelegate) {
return false;
}
}
I am looking forward your answers.
Thank you!
Use Offstage widget
Offstage(
offstage: _controller.index == 1,
child: _bottomButtons(tabindi)
),
Update when tap TabBar
TabBar(onTap: (_) => setState((){}));

flutter sliver list tabbar bottom overflowed error

I am a newbie of flutter.
I have just started to rebuild my android app built by Kotlin to flutter.
However, I am stuck in building the user page.
I intended to build the page like this screenshot
However, I continuously get bottom overflowed error.
How can I solve this problem?
I am looking forward to your help.
I will attach the whole code of the page.
import 'package:botanic_flutter/login_page.dart';
import 'package:botanic_flutter/main.dart';
import 'package:botanic_flutter/root_page.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:botanic_flutter/custom_color_scheme.dart';
import 'package:google_sign_in/google_sign_in.dart';
class AccountPage extends StatefulWidget {
final String userUid;
AccountPage(this.userUid);
#override
_AccountPageState createState() => _AccountPageState();
}
class _AccountPageState extends State<AccountPage> with SingleTickerProviderStateMixin {
final GoogleSignIn _googleSignIn = GoogleSignIn();
final FirebaseAuth _Auth = FirebaseAuth.instance;
FirebaseUser _currentUser;
TabController _controller;
#override
void initState() {
super.initState();
_controller = new TabController(length: 2, vsync: this);
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: DefaultTabController(
length: 2,
child: NestedScrollView(
headerSliverBuilder: (context, isScrolled) {
return <Widget> [
SliverList(
// itemExtent: 300,
delegate: SliverChildListDelegate([
Container(
child: Column(
children: <Widget>[
_detailedBody()
],
),
)
]),
),
];
},
body: Column(
children: <Widget>[
TabBar(
unselectedLabelColor: Theme.of(context).colorScheme.greyColor,
labelColor: Theme.of(context).colorScheme.mainColor,
controller: _controller,
indicatorColor: Theme.of(context).colorScheme.mainColor,
tabs: [
Container(
height: 90,
padding: EdgeInsets.only(top: 20),
child: Tab(
icon: const Icon(Icons.home,
),
text: 'PLANTS',
),
),
Container(
height: 90,
padding: EdgeInsets.only(top: 20),
child: Tab(
icon: const Icon(Icons.bookmark_border,
),
text: 'BOOKMARK',
),
)
],
),
Expanded(
flex: 1,
child: TabBarView(
controller: _controller,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
child: Column(
children: <Widget>[
Container(
child: Row(
children: <Widget>[
Padding(
padding:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
child: Icon(
Icons.clear_all,
color: Colors.grey,
),
),
Container(
width: MediaQuery.of(context).size.width/3*1.4,
child: DropdownButton<String>(
isExpanded: true,
items: <String>['Foo', 'Bar'].map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
onChanged: (_) {},
),
),
Padding(
padding:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
child: Icon(
Icons.mode_edit,
color: Colors.grey,
),
),
Padding(
padding:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 1.0),
child: Icon(
Icons.delete,
color: Colors.grey,
),
),
Padding(
padding: EdgeInsets.all(4.0),
),
Container(
height: 30,
width: MediaQuery.of(context).size.width/4.5,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.mainColor,
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.shade200,
offset: Offset(2, 4),
blurRadius: 5,
spreadRadius: 2)
],
),
child: FlatButton(
child: Text(
"+식물등록",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 13,
color: Colors.white,
),
),
onPressed: () => {
},
),
),
],
),
),
Expanded(
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 1.0,
mainAxisSpacing: 1.0,
crossAxisSpacing: 1.0),
itemCount: notes.length,
itemBuilder: (context, index) => Card(
child: Image.network(notes[index],
fit: BoxFit.cover,
),
),
),
),
],
),
),
Container(
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 1.0,
mainAxisSpacing: 1.0,
crossAxisSpacing: 1.0),
itemCount: notes.length,
itemBuilder: (context, index) => Card(
child: Image.network(notes[index],
fit: BoxFit.cover,
),
),
),
)
],
),
),
],
),
),
),
);
}
Widget _detailedBody() {
return SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width * 3 / 4,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
'http://www.korea.kr/newsWeb/resources/attaches/2017.08/03/3737_cp.jpg'),
),
),
),
Container(
transform: Matrix4.translationValues(0.0, -41.0, 0.0),
child: Column(
children: <Widget>[
Stack(
alignment: Alignment.center,
children: <Widget>[
SizedBox(
width: 90.0,
height: 90.0,
child: CircleAvatar(
backgroundColor: Colors.white,
),
),
SizedBox(
width: 82.0,
height: 82.0,
child: CircleAvatar(
backgroundImage: NetworkImage('https://steemitimages.com/DQmS1gGYmG3vL6PKh46A2r6MHxieVETW7kQ9QLo7tdV5FV2/IMG_1426.JPG')
),
),
Container(
width: 90.0,
height: 90.0,
alignment: Alignment.bottomRight,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
SizedBox(
width: 28.0,
height: 28.0,
child: FloatingActionButton(
onPressed: null,
backgroundColor: Colors.white,
//child: Icon(Icons.add),
),
),
SizedBox(
width: 25.0,
height: 25.0,
child: FloatingActionButton(
onPressed: null,
backgroundColor: Theme.of(context).colorScheme.mainColor,
child: Icon(Icons.add),
),
),
],
)
)
],
),
Padding(padding: EdgeInsets.all(5.0)),
Text(
'nickname',
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 24.0),
),
Padding(padding: EdgeInsets.all(5.0)),
Text(
'introduce',
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 15.0),
),
Padding(padding: EdgeInsets.all(9.0)),
FlatButton(
onPressed: () {
signOutWithGoogle().then((_) {
Navigator.popUntil(context, ModalRoute.withName('/'));
});
},
color: Theme.of(context).colorScheme.mainColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0)),
child: Text('로그아웃'),
),
Padding(padding: EdgeInsets.all(9.0)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Column(
children: <Widget>[
Text(
'0',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16.0),
),
Text(
'식물수',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20.0),
),
],
),
Column(
children: <Widget>[
Text(
'0',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16.0),
),
Text(
'팔로워',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20.0),
),
],
),
Column(
children: <Widget>[
Text(
'0',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16.0),
),
Text(
'팔로잉',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20.0),
),
],
)
],
)
],
),
),
],
),
);
}
List<String> notes = [
'https://steemitimages.com/DQmS1gGYmG3vL6PKh46A2r6MHxieVETW7kQ9QLo7tdV5FV2/IMG_1426.JPG',
'https://lh3.googleusercontent.com/proxy/BKvyuWq6b5apNOqvSw3VxB-QhezYHAoX1AptJdWPl-Ktq-Efm2gotbeXFtFlkr_ZPZmpEHc2BsKTC9oFQgzBimKsf5oRtTqOGdlO3MTfwiOT54E5m-lCtt6ANOMzmhNsYMGRp9Pg1NzjwMRUWNoWX0oJEFcnFvjOj2Rr4LtZpkXyiQFO',
'https://img1.daumcdn.net/thumb/R720x0.q80/?scode=mtistory2&fname=http%3A%2F%2Fcfile28.uf.tistory.com%2Fimage%2F2343174F58DBC14C2ECB8B',
];
Future<void> signOutWithGoogle() async {
// Sign out with firebase
await _Auth.signOut();
// Sign out with google
await _googleSignIn.signOut();
}
}