Dropdown menu for drawer header [Flutter] - android

Hi what I want to do is make a dropdown menu inside of a drawer header but when I tried I got constraint errors also Im curious how can I pass 2 values into it so when pressed the text will change according to it
My code:
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
Container(
height: MediaQuery.of(context).size.height * 0.20,
child: DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
children: [
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
widget.name,
style: TextStyle(
color: Colors.amber,
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
),
SizedBox(
height: 3,
),
Align(
alignment: Alignment.centerLeft,
child: Text(
widget.name,
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w400,
),
),
),
],
),
),
),
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: Icon(Icons.keyboard_arrow_down),
),
)
],
),
),
),
),
SingleChildScrollView(
child: Column(
children: [
AppListItems(Icons.favorite, 'Text', SecondRoute()),
AppListItems(Icons.favorite, 'Text', SecondRoute()),
],
),
),
],
),
);
This is how it looks like and where I want the dropdown menu to be:
Any help would be great, thanks in advance


Try below code hope its help to you.
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
Container(
height: MediaQuery.of(context).size.height * 0.20,
child: DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
children: [
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
'widget.name',
style: TextStyle(
color: Colors.amber,
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
),
SizedBox(
height: 3,
),
Align(
alignment: Alignment.centerLeft,
child: Text(
'widget.name',
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w400,
),
),
),
],
),
),
),
Expanded(
child: DropdownButton<String>(
value: dropdownValue,
isDense: true,
icon: const Icon(Icons.arrow_downward),
elevation: 16,
style: const TextStyle(color: Colors.deepPurple),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
)
],
),
),
),
),
SingleChildScrollView(
child: Column(
children: [
Icon(
Icons.favorite,
),
Icon(
Icons.favorite,
),
],
),
),
],
),
),
Your result screen->
Your dropdown->

Related

Cannot Scroll ListView inside FutureBuilder

I have tried almost all the solution on stackoverflow like using Expanded widget with single child scroll view and physics property and what not but still cannot enable scroll inside futurebuilder which occupy second half of my screen, the first half is static but second half contains listview inside future builder but it's not scrollable !!
The Error is Bottom Overflowed by 1313 pixels
This Is My Code
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
resizeToAvoidBottomInset: true,
body:Container(
child: Column(
children: [
Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(15,12,15,0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.asset('assets/hamburger.png',height: 25,width: 25,alignment: Alignment.topLeft,),
Image.asset('assets/log.png',height: 37,width: 37,alignment: Alignment.center,),
Image.asset('assets/searc.png',height: 25,width: 25,alignment: Alignment.topRight,),
],
),
),
SizedBox(height: 10,),
Padding(
padding: const EdgeInsets.fromLTRB(15, 0, 0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
CircleAvatar(
radius: 30,
backgroundImage: NetworkImage(img)
),
// split(data[index]["image"])
SizedBox(width: 20,),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
children: [
Text('Hello',style: TextStyle(
color: Colors.black,
fontSize: 15,
),textAlign: TextAlign.start,),
SizedBox(width: 5,),
Text(name,style: TextStyle(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.bold
),textAlign: TextAlign.start,),
],
),
Text('Welcome To Quad Life',style: TextStyle(
color: Colors.grey,
fontSize: 13,
),textAlign: TextAlign.start,),
],
),
],
),
),
SizedBox(height: 10,),
Padding(
padding: const EdgeInsets.fromLTRB(15, 0, 15, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width:MediaQuery.of(context).size.width*0.4,
height: 70,
child: Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
) ,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 5),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(data.length.toString(),
style:
TextStyle(color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.bold),),
SizedBox(height: 5,),
Text('Operators',style:
TextStyle(color: Colors.grey,
fontSize: 15,
fontWeight: FontWeight.bold),),
],
),
),
),
),
SizedBox(
width:MediaQuery.of(context).size.width*0.4,
height: 70,
child: Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
) ,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 5),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(data1.length.toString(),style:
TextStyle(color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.bold),),
SizedBox(height: 5,),
Text('Supervisors',style:
TextStyle(color: Colors.grey,
fontSize: 15,
fontWeight: FontWeight.bold),),
],
),
),
),
),
],
),
),
Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 15, 0, 0),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Card(
elevation: 20,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
) ,
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: 150,
child: LineChart(
LineChartData(
borderData: FlBorderData(
show: true,
border: Border.all(width: 0)
),
gridData: FlGridData(
show: false,
),
titlesData: FlTitlesData(
show: false,
bottomTitles: SideTitles(
showTitles: true,
)
),
maxX: 50,
maxY: 100,
minX: 0,
minY: 0,
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(0, 50),
FlSpot(10, 60),
FlSpot(15, 55),
FlSpot(20, 60),
FlSpot(30, 70),
FlSpot(40, 65),
FlSpot(50, 90),
],
isCurved: true,
colors: [Colors.orange,Colors.orangeAccent.shade700],
barWidth: 5,
belowBarData: BarAreaData(
show: true,
colors: gradientcolors.map((e) => e.withOpacity(0.3)).toList()
)
),
],
)
),
),
),
),
),
SizedBox(height: 10,),
Padding(
padding: const EdgeInsets.fromLTRB(15, 0, 15, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width:MediaQuery.of(context).size.width*0.45,
height: 70,
child: Card(
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(7),
) ,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 5),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('New Operator',style:
TextStyle(color: Colors.black,
fontSize: 14,),),
SizedBox(height: 5,),
Text('Register new verfied Operator',
textAlign: TextAlign.center,
style:
TextStyle(color: Colors.grey,
fontSize: 9,
fontWeight: FontWeight.bold),),
],
),
),
),
),
SizedBox(
width:MediaQuery.of(context).size.width*0.45,
height: 70,
child: Card(
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(7),
) ,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 5),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('New Supervisors',style:
TextStyle(color: Colors.black,
fontSize: 14,),),
SizedBox(height: 5,),
Text('Register new verfied Supervisors',
textAlign: TextAlign.center,
style:
TextStyle(color: Colors.grey,
fontSize: 9,
fontWeight: FontWeight.bold),),
],
),
),
),
),
],
),
),
],
),
SizedBox(height: 5,),
Padding(
padding: EdgeInsets.fromLTRB(15, 0, 0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text('Verify Operators',style: TextStyle(
color: Colors.grey.shade500,
fontSize: 15,
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
FutureBuilder(
builder: (context, snapshot){
if(snapshot != null){
return Column(
children: [
ListView.builder(
scrollDirection: Axis.vertical,
physics:NeverScrollableScrollPhysics(),
shrinkWrap: true,
// builder: (BuildContext context, int index) {
// return SizedBox(height: 0);
// },
itemCount: data == null ? 0 :data.length ,
itemBuilder: (context, index){
return InkWell(
onTap: (){},
child: Padding(
padding: const EdgeInsets.all(0),
child: Container(
height: MediaQuery.of(context).size.height*0.1,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(left: 15),
child: SizedBox(
height: 50,
width: 50,
child: ClipRRect(
borderRadius: BorderRadius.circular(15),
child: Image(
image: NetworkImage(split(data[index]["image"])),
),
),
),
),
SizedBox(width: 10,),
Padding(
padding: const EdgeInsets.only(top: 25),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(data[index]["fullName"],
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15,
color: Colors.black,
fontWeight: FontWeight.bold,
),),
Text(capitalize(data[index]["experience"][data[index]["experience"].length-1]['designation']),
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15,
color: Colors.grey,
fontWeight: FontWeight.w100
),),
],
),
),
],
),
Padding(
padding: const EdgeInsets.only(right: 20),
child: TextButton(onPressed: (){},
child: Text('Verify Now',style:
TextStyle(color: Colors.green,fontWeight: FontWeight.bold,
fontSize: 15),),),
)
],
),
),
),
);
},
),
],
);
}else{
return CircularProgressIndicator();
}
},
),
],
),
),
),
);
}

=>Change Second half with this
Expanded(
flex: 1,
child: FutureBuilder(
builder: (context, snapshot) {
if (snapshot != null) {
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
// builder: (BuildContext context, int index) {
// return SizedBox(height: 0);
// },
itemCount: data == null ? 0 : data.length,
itemBuilder: (context, index) {
return InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.all(0),
child: Container(
height:
MediaQuery.of(context).size.height * 0.1,
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(20)),
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(left: 15),
child: SizedBox(
height: 50,
width: 50,
child: ClipRRect(
borderRadius:
BorderRadius.circular(15),
child: Image(
image: NetworkImage(split(
data[index]["image"])),
),
),
),
),
SizedBox(
width: 10,
),
Padding(
padding:
const EdgeInsets.only(top: 25),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
data[index]["fullName"],
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
Text(
capitalize(data[index]
["experience"][data[index]
["experience"]
.length -
1]['designation']),
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15,
color: Colors.grey,
fontWeight:
FontWeight.w100),
),
],
),
),
],
),
Padding(
padding: const EdgeInsets.only(right: 20),
child: TextButton(
onPressed: () {},
child: Text(
'Verify Now',
style: TextStyle(
color: Colors.green,
fontWeight: FontWeight.bold,
fontSize: 15),
),
),
)
],
),
),
));
});
} else {
return CircularProgressIndicator();
}
},
),
),

Try below format hope its helpful to you. Wrap your FutureBuilder inside Expanded or Flexible
body: Column(
children: [
Container(),
Expanded(
child: FutureBuilder(
future: yourFutureCall();
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
return ListView.builder(
shrinkWrap: true,
physics:
const NeverScrollableScrollPhysics(), //OR use -> const ClampingScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return Container();
},
);
},
),
),
],
),

I'm not sure , cause I could not run the code , but What I see is the unbounded widgets from lack of the specified width and height which is a common mistake in flutter world .
if #Jasmin Sojitra's answer does not work try putting height and width of full screen on the first Container , If still there is a problemt put child of the Container inside a SingleChildScrollView .

A value of type 'Object?' can't be assigned to a variable of type 'SinginCharacter' [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 12 months ago.
Improve this question
import 'package:flutter/material.dart';
import 'package:foodcorner/color/colors.dart';
enum SinginCharacter {fill,outline}
class ProductDetails extends StatefulWidget {
const ProductDetails({Key? key}) : super(key: key);
#override
_ProductDetailsState createState() => _ProductDetailsState();
}
class _ProductDetailsState extends State<ProductDetails> {
SinginCharacter _character = SinginCharacter.fill;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
iconTheme: IconThemeData(color: textColor),
title: Text(
'Product Details',
style: TextStyle(color: textColor),
),
backgroundColor: primaryColor,
),
bottomNavigationBar: Row(children: [
Expanded(
child: Material(
color: Colors.deepOrangeAccent,
child: InkWell(
onTap: () {
//print('called on tap');
},
child: SizedBox(
height: kToolbarHeight,
width: double.infinity,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.favorite_border_outlined),
SizedBox(
width: 5,
),
Text(
'Add To WishList',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
],
),
),
),
),
),
),
Expanded(
child: Material(
color: Colors.amberAccent,
child: InkWell(
onTap: () {
//print('called on tap');
},
child: SizedBox(
height: kToolbarHeight,
width: double.infinity,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.shop_outlined),
SizedBox(
width: 5,
),
Text(
'Add To Cart',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
],
),
),
),
),
),
)
]),
body: Column(
children: [
Expanded(
flex: 2,
child: Container(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 20, left: 15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'fresh Basil',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 25),
),
SizedBox(
height: 10,
),
Text(
'\ 50Tak',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 25),
),
],
),
),
Container(
height: 250,
margin: EdgeInsets.all(40),
child: Center(
child: Image.network(
'http://assets.stickpng.com/images/58bf1e2ae443f41d77c734ab.png'),
)),
Padding(
padding: const EdgeInsets.only(left: 15),
child: Container(
width: double.infinity,
child: Text(
'Available Option',
style: TextStyle(
fontWeight: FontWeight.w600, fontSize: 20),
),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Row(
children: [
Row(
children: [
CircleAvatar(
radius: 3,
backgroundColor: Colors.green[700],
),
//A value of type 'Object?' can't be assigned to a variable of type 'SinginCharacter'.
Radio(
activeColor: Colors.green[700],
value: SinginCharacter.fill,
groupValue: _character,
onChanged: (value){
setState(() {
_character=value;
});
},
)
],
)
],
),
)
],
),
),
)
],
),
);
}
}

You're missing the type on the Radio widget, as in Radio< SinginCharacter>, as in:
Radio<SinginCharacter>(
activeColor: Colors.green[700],
value: SinginCharacter.fill,
groupValue: _character,
onChanged: (value){
setState(() {
_character=value;
});
},
)

How to add vertical spacing to widgets Flutter

I have a piece of code here which makes up the body of the login and register screens. Everything is in the position i want but i would like to space them out a little. The two input fields, title, subtitle, button and textbutton are too close together vertically.
I tried to use mainaxisalignment.spacebetween but i get a constraint error and everything i have on the screen disappears afterwards except the background.
The body used by the register and login screen:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomLeft,
colors: [Color(0xFF1F1F1F), Color(0xFF1F1F1F)],
),
image: DecorationImage(
image: AssetImage("lib/assets/images/register.png"),
alignment: Alignment.topCenter,
),
),
child: Stack(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/bottomleft.png'),
alignment: Alignment.bottomLeft,
),
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/toptop.png'),
alignment: Alignment.topRight,
),
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/topbig.png'),
alignment: Alignment.topCenter,
repeat: ImageRepeat.repeat),
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/top.png'),
alignment: Alignment.topCenter,
repeat: ImageRepeat.repeatX),
),
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 25, vertical: 250),
child: ListView(
children: [
if (onBackPressed == null) verticalSpaceLarge,
if (onBackPressed != null) verticalSpaceRegular,
if (onBackPressed != null)
IconButton(
padding: EdgeInsets.zero,
onPressed: onBackPressed,
alignment: Alignment.centerLeft,
icon: Icon(
Icons.arrow_back_ios,
color: Colors.black,
),
),
Center(
child: Text(
title!,
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
),
),
),
Align(
alignment: Alignment.center,
child: SizedBox(
child: Center(
child: Text(
subtitle!,
style: ktsMediumGreyBodyText,
),
),
),
),
form!,
if (onForgotPassword != null)
Align(
alignment: Alignment.centerRight,
child: GestureDetector(
onTap: onForgotPassword,
child: Center(
child: Text(
'Forgot Password?',
style: ktsMediumGreyBodyText.copyWith(),
),
),
),
),
if (validationMessage != null)
Center(
child: Text(
validationMessage!,
style: TextStyle(
color: Colors.red, fontSize: kBodyTextSize),
),
),
if (validationMessage != null) verticalSpaceRegular,
GestureDetector(
onTap: onMainButtonTapped,
child: Container(
width: double.infinity,
height: 50,
alignment: Alignment.center,
decoration: BoxDecoration(
color: kcPrimaryColor,
borderRadius: BorderRadius.circular(8),
),
child: busy!
? CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(Colors.white),
)
: Text(
mainButtonTitle!,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 14),
),
),
),
if (onCreateAccountTapped != null)
GestureDetector(
onTap: onCreateAccountTapped,
child: Center(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Don\'t have an account?",
style: TextStyle(color: Colors.white),
),
Text(
"SIGN UP",
style: TextStyle(color: kcPrimaryColor),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"OR SIGN IN WITH",
style: TextStyle(color: kcMediumGreyColor),
),
],
),
],
),
),
),
if (showTermsText!)
Center(
child: Text(
"By signing up you agree to our terms, conditions and privacy policy",
style: ktsMediumGreyBodyText,
textAlign: TextAlign.center,
),
),
],
),
),
],
),
),
);
}
}
the login screen:
Widget build(BuildContext context) {
return ViewModelBuilder<LoginScreenModel>.reactive(
builder: (context, model, child) => Scaffold(
body: AuthenticationLayout(
busy: model.isBusy,
onCreateAccountTapped: () {},
//validationMessage: model.validationMessage,
title: 'SIGN IN',
subtitle: 'please fill the form below',
mainButtonTitle: 'SIGN IN',
form: Column(
children: [
TextField(
decoration: InputDecoration(
hintText: 'Username',
hintStyle: TextStyle(color: Colors.white),
prefixIcon: const Icon(
Icons.person,
color: Colors.white,
),
),
),
TextField(
decoration: InputDecoration(
hintText: 'Password',
hintStyle: TextStyle(color: Colors.white),
prefixIcon: const Icon(
Icons.lock,
color: Colors.white,
),
),
),
],
),
onForgotPassword: () {},
),
),
viewModelBuilder: () => LoginScreenModel(),
);
}
}

Column(
children: <Widget>[
FirstWidget(),
SizedBox(height: 100),
SecondWidget(),
],
),

You should Add SizedBox() in between two Widgets, or Set Padding to your widgets or you use Container also like below:
Using SizedBox()
Column(
children:[
Widget 1(),
SizedBox(height:10),
Widget 2(),
SizedBox(height:10),
Widget 3(),
],
),
Using Padding()
Column(
children:[
Padding(
padding:EdgeInsets.all(8.0)
child: Widget 1(),
),
Padding(
padding:EdgeInsets.all(8.0)
child: Widget 2(),
),
Padding(
padding:EdgeInsets.all(8.0)
child: Widget 3(),
),
],
),
Using Container()
Column(
children:[
Container(
padding:EdgeInsets.all(8.0)
child: Widget 1(),
),
Container(
padding:EdgeInsets.all(8.0)
child: Widget 2(),
),
Container(
padding:EdgeInsets.all(8.0)
child: Widget 3(),
),
],
),
You should use padding on your choice like:
EdgeInsets.all(8.0),
EdgeInsets.only(left:8.0,top:8.0,right:8.0,bottom:8.0),
EdgeInsets.symmetric(vertical: 8.0,horizontal:8.0),

You may add some SizedBox() between or set margin to the components.

Use SizedBox widget to add vertical spacing to your widget.
For e.g
SizedBox(height: 16),

Flutter Tabbar with ExpansionTile

Currently I'm trying to build ExpansionTile with TabBar, I create separately for each ExpansionTile, but when I combine it with tabbar, the expansiontile doesn't work properly maybe just look at the gif for a better understanding xD, what I am trying to do make it fluent with tabbar , maybe I missing something?
Because the code is to long and i got Body is limited to 30000 characters; you entered 39405. so a few code i copy into Pastebin
Without Tabbar
https://i.imgur.com/8fRGjku.gif
With Tabbar
https://i.imgur.com/gZ5f0X3.gif
This is the Code for the menuTwo
https://pastebin.com/CcL6VRPS
TabBar
https://pastebin.com/aBiyh1RN
ExpandedOne
https://pastebin.com/GgxCZrf8
ExpandedTwo
class ExpandedTwo extends StatefulWidget {
const ExpandedTwo({Key? key}) : super(key: key);
#override
_ExpandedTwoState createState() => _ExpandedTwoState();
}
class _ExpandedTwoState extends State<ExpandedTwo> {
#override
Widget build(BuildContext context) {
var _sizeScreen = Screen(MediaQuery.of(context).size);
var _sizeHeight = MediaQuery.of(context).size.height;
return Material(
child: Theme(
data: Theme.of(context).copyWith(accentColor: Colors.black),
child: ExpansionTile(
collapsedBackgroundColor: Colors.transparent,
backgroundColor: Colors.transparent,
title: Text(
'Expanded Two',
style: GoogleFonts.rubik(fontWeight: FontWeight.w500, fontSize: 14),
),
leading: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Color(0xFEFFFFFF), width: 3),
),
child: Center(
child: Icon(Icons.unsubscribe_sharp)),
),
children: [
Container(
padding: EdgeInsets.symmetric(horizontal: _sizeScreen.sizeWidth(15)),
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
alignment: Alignment.topLeft,
margin: EdgeInsets.fromLTRB(_sizeHeight / 65,
_sizeScreen.hp(2), 0, _sizeHeight / 97),
child: Text(
'Informasi',
style: GoogleFonts.nunitoSans(
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w700,
fontSize: 16),
),
),
Divider(
thickness: 2,
color: Color(0xFEF6F6F6),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(top: _sizeScreen.sizeHeight(3)),
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Text('Header',style: GoogleFonts.nunitoSans(
fontSize: 14,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.normal,
color: Colors.black
),),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Padding(
padding: EdgeInsets.fromLTRB(0,
_sizeScreen.sizeHeight(0),0,
_sizeScreen.sizeHeight(16)),
child: ElevatedButton(
onPressed: () {
print("Button");
},
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40))),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(0.0))),
child: Ink(
decoration: const BoxDecoration(
color: Color(0xFEFFDD00),
borderRadius: BorderRadius.all(Radius.circular(40)),
),
child: Container(
constraints: const BoxConstraints(
minWidth: 100.0, minHeight: 40.0),
// min sizes for Material buttons
alignment: Alignment.center,
child: Text("Complete the Data",
style: GoogleFonts.nunitoSans(
fontSize: 16,
color: Colors.black,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.normal)),
),
),
),
),
],
),
),
],
initiallyExpanded: false,
),
),
);
}
}
ExpandedThree
class ExpandedThree extends StatefulWidget {
const ExpandedThree({Key? key}) : super(key: key);
#override
_ExpandedThreeState createState() => _ExpandedThreeState();
}
class _ExpandedThreeState extends State<ExpandedThree> {
#override
Widget build(BuildContext context) {
var _sizeScreen = Screen(MediaQuery.of(context).size);
var _sizeHeight = MediaQuery.of(context).size.height;
return Material(
child: Theme(
data: Theme.of(context).copyWith(accentColor: Colors.black),
child: ExpansionTile(
collapsedBackgroundColor: Colors.transparent,
backgroundColor: Colors.transparent,
title: Text(
'Expanded Three',
style: GoogleFonts.rubik(fontWeight: FontWeight.w500, fontSize: 14),
),
leading: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Color(0xFEFFFFFF), width: 3),
),
child: Center(
child: Icon(Icons.home)),
),
children: [
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(children: [
Container(
color: Colors.white,
child: Column(
children: [
Container(
alignment: Alignment.topLeft,
margin: EdgeInsets.fromLTRB(_sizeHeight / 65,
_sizeScreen.hp(2), 0, _sizeHeight / 97),
child: Text(
'Source Information 1',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500, fontSize: 16),
),
),
Container(
padding: EdgeInsets.fromLTRB(
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Type Source',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w400, fontSize: 11),
),
Spacer(),
Text(
'Not Yet Filled',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500,
fontSize: 11,
fontStyle: FontStyle.normal),
)
],
)),
Container(
padding: EdgeInsets.fromLTRB(
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Source Information',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w400, fontSize: 11),
),
Spacer(),
Text(
'Not Yet Filled',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500,
fontSize: 11,
fontStyle: FontStyle.normal),
)
],
)),
Container(
padding: EdgeInsets.fromLTRB(
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Note',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w400, fontSize: 11),
),
Spacer(),
Text(
'Not Yet Filled',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500,
fontSize: 11,
fontStyle: FontStyle.normal),
)
],
)),
Container(
alignment: Alignment.topLeft,
margin: EdgeInsets.fromLTRB(_sizeHeight / 65,
_sizeScreen.hp(2), 0, _sizeHeight / 97),
child: Text(
'Source Information 2',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500, fontSize: 16),
),
),
Container(
padding: EdgeInsets.fromLTRB(
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Source Type',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w400, fontSize: 11),
),
Spacer(),
Text(
'Not Yet Filled',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500,
fontSize: 11,
fontStyle: FontStyle.normal),
)
],
)),
Container(
padding: EdgeInsets.fromLTRB(
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Source Information Name',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w400, fontSize: 11),
),
Spacer(),
Text(
'Not Yet Filled',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500,
fontSize: 11,
fontStyle: FontStyle.normal),
)
],
)),
Container(
padding: EdgeInsets.fromLTRB(
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Note',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w400, fontSize: 11),
),
Spacer(),
Text(
'Not Yet Filled',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500,
fontSize: 11,
fontStyle: FontStyle.normal),
)
],
)),
SizedBox(
height: _sizeScreen.sizeHeight(24),
),
Padding(
padding: EdgeInsets.fromLTRB(
_sizeScreen.sizeWidth(16),
_sizeScreen.sizeHeight(0),
_sizeScreen.sizeWidth(16),
_sizeScreen.sizeHeight(16)),
child: ElevatedButton(
onPressed: () {
print("Complete the Data");
},
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8))),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(0.0))),
child: Ink(
decoration: const BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.all(Radius.circular(8)),
),
child: Container(
constraints: const BoxConstraints(
minWidth: 100.0, minHeight: 50.0),
// min sizes for Material buttons
alignment: Alignment.center,
child: Text("Complete the Data",
style: GoogleFonts.rubik(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal)),
),
),
),
),
],
),
),
],),
)
],
initiallyExpanded: false,
),
),
);
}
}

I Change height on Tabbar ( height: MediaQuery.of(context).size.height, child: TabBarView(children: [MenuOne(), MenuTwo()]), ) into fix Height for example 500
( height: 500, child: TabBarView(children: [MenuOne(), MenuTwo()]), ), that solve my problem, if I am using MediaQuery.of(context).size.height * number that's make the function scroll doesn't work
The alternative way , i have class for size for like
class Screen {
late Size screenSize;
Screen(this.screenSize);
double sizeHeight(height) {
double resultCalculation = screenSize.width / height;
return screenSize.height / resultCalculation;
}
double sizeWidth(width) {
double resultCalculation = screenSize.width / width;
return screenSize.width / resultCalculation;
}
double wp(percentage) {
return percentage / 100 * screenSize.width;
}
double hp(percentage) {
return percentage / 100 * screenSize.height;
}
double getWidthPx(int pixels) {
return (pixels / 3.61) / 100 * screenSize.width;
}
static bool isScreenLarge(double width, double pixel) {
return width * pixel >= 1440;
}
static bool isScreenMedium(double width, double pixel) {
return width * pixel < 1440 && width * pixel >= 1080;
}
static bool isScreenSmall(double width, double pixel) {
return width * pixel <= 720;
}
}
and i just need to call that for the height
var _sizeScreen = Screen(MediaQuery.of(context).size);
and do height: _sizeScreen.hp(70)

Why TabBar View hides under Tab Bar?

imageWhen I scroll my screen flexible space collapses which is fine but as I scroll my tab bar view a part of It moves under tab bar even if I don't add scroll in Tab Bar view. I am new to flutter, this is my first project. Please help me with this issue. Also I am new to stack overflow. BTW I have to add these lines because stack overflow is giving me this error "It looks like your post is mostly code; please add some more details." :) :)
Heading ##return Scaffold(
appBar: AppBar(title: Text("Author"),),
body: NestedScrollView(
controller: _scrollController,
headerSliverBuilder: (BuildContext context, bool boxIsScrolled){
return <Widget>[
SliverAppBar(
leading: Container(),
backgroundColor: Colors.white,
pinned: true,
floating: true,
forceElevated: boxIsScrolled,
bottom: TabBar(
controller: _tabController,
indicatorSize: TabBarIndicatorSize.tab,
tabs: [
Tab(child: Row(mainAxisAlignment:MainAxisAlignment.center,children:[Icon(Icons.photo_sharp, color: Colors.black,),SizedBox(width: 10.0,),Text("Posts", style: TextStyle(color: Colors.black),)],),),
Tab(child: Row(mainAxisAlignment:MainAxisAlignment.center,children:[Icon(Icons.dashboard_rounded, color: Colors.black,),SizedBox(width: 10.0,),Text("Courses", style: TextStyle(color: Colors.black),)],),),
],
),
flexibleSpace: SafeArea(
child: FlexibleSpaceBar(
collapseMode: CollapseMode.pin,
background: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.all(8),
child: Row(
children: [
CircleAvatar(
radius: 45.0,
child: author.photo_url == null ? Image.asset("assets/user.png") : imageUrl == null ? CircularProgressIndicator():
ClipRRect(
borderRadius: BorderRadius.circular(83.0),
child: Image(
image: NetworkImage(imageUrl),
width: 140,
height: 140,
fit: BoxFit.fill,
),
)),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text("Followers", style: TextStyle(fontWeight: FontWeight.w700, fontSize: 19.0)),
SizedBox(height: 12.0,),
Text("0", style: TextStyle(fontWeight: FontWeight.w500, fontSize: 18.0)),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text("Posts", style: TextStyle(fontWeight: FontWeight.w700, fontSize: 19.0)),
SizedBox(height: 12.0,),
Text("0", style: TextStyle(fontWeight: FontWeight.w500, fontSize: 18.0)),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text("Courses", style: TextStyle(fontWeight: FontWeight.w700, fontSize: 19.0)),
SizedBox(height: 12.0,),
Text("0", style: TextStyle(fontWeight: FontWeight.w500, fontSize: 18.0)),
],
)
],
),
)
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(18, 8, 0, 0),
child: Text("${author.name}", style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, letterSpacing: 1.0),),
),
Padding(
padding: EdgeInsets.fromLTRB(20, 5, 0, 0),
child: Text("${author.qualification}", style: TextStyle(letterSpacing: 1.0),),
),
Padding(
padding: EdgeInsets.fromLTRB(20, 5, 0, 0),
child: Text("${author.profession}", style: TextStyle(letterSpacing: 1.0),),
),
Padding(
padding: EdgeInsets.fromLTRB(20, 15, 20, 0),
child: Container(
width: deviceWidth,
child: RaisedButton.icon(
color: Colors.blue,
label: Text(followedAuthorsID.contains(author.id) ? "Following" : "Follow", style: TextStyle(color: Colors.white, fontWeight: FontWeight.w700, letterSpacing: 0.5),),
icon: Icon(followedAuthorsID.contains(author.id) ? Icons.check_box : Icons.person_add, color: Colors.white,),
onPressed: (){
followAuthor(author, followedAuthorsID.contains(author.id));
},
),
),
),
Divider(height: 40,color: Colors.black,),
]),
),
),
expandedHeight: 305,
)
];
},
body: TabBarView(
controller: _tabController,
children: [
GridView.count(
childAspectRatio: 1,
shrinkWrap: true,
physics: ScrollPhysics(),
crossAxisCount: 3,
children: [
Container(color: Colors.red,),
Container(color: Colors.green,),
Container(color: Colors.red,),
Container(color: Colors.green,),
],
),
// ListView(
// children : [
// SizedBox(height: 100),
// Center(child: Text("No Posts Added", style: TextStyle(fontWeight: FontWeight.w500, fontSize: 22, letterSpacing: 0.5),)),
ListView(
children : [
SizedBox(height: 100,),
Center(child: Text("No Courses Added", style: TextStyle(fontWeight: FontWeight.w500, fontSize: 22, letterSpacing: 0.5),)),
SizedBox(height: 25),
CircleAvatar(
radius: 45,
child: Icon(Icons.dashboard_rounded, size: 35,),
),
]
),
],
),
),
);

Categories

Resources