here is my app
as you can see working well, I installed this on my phone, and it works fine too.
and I send this to my friend, and his phone showing like this
mine and his phone is same phone, literally same phone, but in his and any others phone is showing this overflow, mine and this emulator have no problem, how do i fix overflow problem
class Homescreen extends StatelessWidget {
const Homescreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: const Text("Pluto Guess Game"),
backgroundColor: Colors.white60,
),
body: Container(
color: Colors.white,
child: SafeArea(
child: ListView(
children: [
Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
PlayerWidget(
player: messi
),
PlayerWidget(
player: neymar
)
],
),
),
Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
PlayerWidget(
player: mbappe
)
PlayerWidget(
player: ramos
)
],
),
),
Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
PlayerWidget(
player: messi
),
PlayerWidget(
player: neymar
)
],
),
),
Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
PlayerWidget(
player: messi
),
PlayerWidget(
player: neymar
)
],
),
),
Card(
child: IconButton(
icon: const Icon(Icons.gesture),
iconSize: 50,
color: Colors.black,
splashColor: Colors.orange,
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (nav) {
return const Asking();
},
),
);
},
),
),
],
),
),
),
),
);
}
}
and also I'm new at flutter, I know I'm doing lot of mistake in this code please suggest that also
->Use This Code
Widget build(BuildContext context) {
double h = MediaQuery.of(context).size.height;
double w = MediaQuery.of(context).size.width;
return Scaffold(
appBar: getAppBar(context, "Back", "", []),
body: SafeArea(
top: true,
bottom: true,
child: Column(
children: [
Expanded(
child: ListView.builder(
shrinkWrap: true,
physics: BouncingScrollPhysics(),
itemCount: 15,
itemBuilder: (context,v){
return
Container(
padding: EdgeInsets.only(left: 15.0,right: 15.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: h*0.2,
width: w*0.4,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(25.0)
),
),
Container(
height: h*0.2,
width: w*0.4,
decoration: BoxDecoration(
color: Colors.black38,
borderRadius: BorderRadius.circular(25.0)
),
),
],
),
SizedBox(height: 15.0,),
Divider(
color: Colors.black,
),
SizedBox(height: 15.0,),
],
),
);
}),
)
],
),
),
);
}
Without your code I can't make corrections to the current code. but if you need responsive UI that work regardless of screen size, I suggest you use Rows, Columns with Expanded Widget, as necessary.
for example if you need to have 2 Items inside a Row where each occupies same space you can use,
Row (
children: [
Expanded (
flex:1
child: YourWidget()
),
Expanded (
flex:1
child: YourWidget()
)
]
)
Remember to remove hardcoded size properties along the main axis of your Colum or Row.
Same goes for Columns.
If you need each to have varied sizes, you can use flex property of the Expanded Widget. for example, one items has 1/3 of width and other has 2/3 you can put 1 and 2 as flex values.
more explanation from flutter team: Expanded
Related
I am learning flutter right now and my SinglePageScrollView is not working, Please help me out, I am trying to solve it since 10 hours, I am just brewww right now.
This is my code btw
SingleChildScrollView(
child: Container(
child: Column(
children: [
Column(
children: [
Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
child: Image.asset("assets/images/img.jpg"),
),
Container(
margin: const EdgeInsets.only(top: 5),
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
child: const Text(
"Hii, This is what i probably uploaded",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
Divider(color: Colors.black)
],
)
],
),
Column(
children: [
Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
child: Image.asset("assets/images/img.jpg"),
),
Container(
margin: const EdgeInsets.only(top: 5),
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
child: const Text(
"Hii, This is what i probably uploaded",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
Divider(color: Colors.black)
],
)
],
),
],
),
),
)
Btw, SingleChildScrollView is the child of Row widget
Your code is working perfectly, it has only one small mistake,
SingleChildScrollview always need some height means in how much area we want scroll our child widgets.
You’ve 2 widgets in your Column
Row
SingleChildScrollview
You want to scroll your child widgets in Column except Row area, so wrap it within Expanded
Expanded(
child: SingleChildScrollView(
….
Row must have children or you have an unclosed parenthesis in the container.
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
Row(
children: [
SingleChildScrollView(
child: Container(),
)
],
)
],
),
);
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
Row(),
SingleChildScrollView(
child: Container(),
),
],
),
);
I want that Cancellation charges and the bottom button remains fixed on screen, while the Choose Seat(s) and passengers should be scrollable. But, whenever I am trying to insert any widget after singlechildscrollview, it is not appearing at the bottom.
As, my column has 3 widgets, a row, singlechildscrollview and button, so my button and top row should remain there and remaining seats and passengers should be scrollable, but I am not able to see the bottom button, while my row working fine, remaining there.
Code -
showCancellationCharges(BuildContext? context) {
final DateTime currentDate = DateTime.now();
if (ticketData!.data!.booking!.boarding!.eta! >
currentDate.millisecondsSinceEpoch)
showModalBottomSheet(
backgroundColor: Colors.white,
context: context!,
builder: (context) => Wrap(
children: [
StatefulBuilder(
builder: (context, stateSetter) => Padding(
padding: MediaQuery.of(context).viewInsets,
child: Container(
//height: MediaQuery.of(context).size.height*0.7,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.only(top: 5.0, bottom: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Cancellation Charges',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
)
),
IconButton(
icon: Icon(
Icons.close,
color: colorPrimary,
),
onPressed: () {
Navigator.of(context).pop();
},
),
],
),
),
Container(
height: MediaQuery.of(context).size.height*0.5,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text(
'Choose Seat(s)',
style: TextStyle(color: popUpLightTextColor),
),
),
Column(
children: List.generate(
ticketData!.data!.booking!.seats!.length,
(index) => CancellationItem(
checkBoxState: ticketData!.data!.booking!
.seats![index].selected,
checkBox: (v) => stateSetter(() {
print('seat at index $index $v');
if (v)
totalSeatToCancel++;
else
totalSeatToCancel--;
ticketData!.data!.booking!.seats![index]
.selected = v;
}),
// checkBoxState: data[index.],
imagePath:
'assets/icons/ticket_seat_icon.svg',
title: ticketData!
.data!.booking!.seats![index].code,
)),
),
// CancellationSeatItems(
// data: ticketData.data.booking.seats,
// ),
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text(
'Choose Passenger(s)',
style: TextStyle(color: popUpLightTextColor),
),
),
Column(
children: List.generate(
ticketData!.data!.booking!.passengers!.length,
(index) => CancellationItem(
checkBoxState: ticketData!.data!.booking!
.passengers![index].selected,
checkBox: (v) => stateSetter(() {
if (v)
totalPassengerToCancel++;
else
totalPassengerToCancel--;
print('passenger at index $index $v');
ticketData!.data!.booking!
.passengers![index].selected = v;
}),
imagePath: (ticketData!.data!.booking!
.passengers![index].gender ==
'MALE')
? 'assets/icons/male_icon.svg'
: 'assets/icons/female_icon.svg',
title: ticketData!.data!.booking!
.passengers![index].name,
)),
),
],
),
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Container(
child: ValueListenableBuilder(
valueListenable: isCalculating,
builder: (BuildContext context, bool val, Widget? child) {
return FlatButton(
height: 44,
minWidth: MediaQuery.of(context).size.width,
color: val ? Colors.grey : colorPrimary,
onPressed: () => calculateItem(),
child: Text(
val ? 'Calculating...' : 'Calculate',
style: TextStyle(
color: Colors.white,
fontSize: 16
),
),
);
},
),
),
),
// CancellationPassengerItems(
// data: ticketData.data.booking.passengers,
// ),
],
),
),
),
),
),
],
));
else
_snackbarService.showSnackbar(
message: 'Sorry, ticket can not be cancelled');
}
Actually I solved the problem. I just used isScrollControlled: true, parameter for showModalBottomSheet and it's done.
you may put the listview inside a container with a height
I've been trying so hard to build page view system for quotes app. I want the page to flow full screen from top to bottom and bottom to top scrollable/swipe able to navigate between different quotes each time
like this. The scroll will bring new page each time its not casual scroll. I haven't found any guide regarding this on internet so far.
I don't know about how to build it, nothing is popping in my mind for days now. I've tried pageview with gesture detector for swiping up and down, it doesn't works as desired and appbar is static too and the bottom containers as well I don't want this. What I want is the page/screen to flow under the appbar or even a button on top right corner and under 2 buttons on the bottom.
Create a column of Containers where each Container's height and width equals the height and width of the screen. You can do that by using:
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
Also, make sure to wrap your code with a SingleChildScrollView widget to scroll vertically.
Here's the code:
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(child: Text('Quote number one')),
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(icon: Icon(Icons.share), onPressed: () {}),
IconButton(
icon: Icon(Icons.favorite), onPressed: () {})
],
),
)
],
),
),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
children: [
Text('Quote number two'),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(icon: Icon(Icons.share), onPressed: () {}),
IconButton(icon: Icon(Icons.favorite), onPressed: () {})
],
)
],
),
)
],
),
),
),
);
}
}
You can use PageView to get this type of view
Drive Video link
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
PageController pageController;
PageView pageView;
List<String> quotes = [
'#Quote 1\n\n“I\'m selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can\'t handle me at my worst, then you sure as hell don\'t deserve me at my best.” ',
'#Qoute 2\n\nSo many books, so little time.',
'#Quote 3\n\n A room without books is like a body without a soul'
];
#override
void initState() {
super.initState();
pageController = PageController();
final _quotes = List.generate(quotes.length, (index) => quoteWidget(index));
pageView = PageView(
children: _quotes,
controller: pageController,
scrollDirection: Axis.vertical,
);
}
Widget quoteWidget(int index) {
return Scaffold(
backgroundColor: Colors.black,
body: Column(
children: [
Expanded(
flex: 3,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Center(
child: Text(
quotes[index],
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w300,
color: Colors.white,
),
),
),
),
),
Expanded(
flex: 1,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
FloatingActionButton(
onPressed: () {},
child: Icon(Icons.share),
),
const SizedBox(width: 20),
FloatingActionButton(
onPressed: () {},
child: Icon(Icons.favorite_border),
),
],
),
),
Expanded(child: Container())
],
),
);
}
#override
void dispose() {
pageController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
brightness: Brightness.dark,
title: Text(widget.title),
),
body: SafeArea(
child: Stack(
alignment: Alignment.bottomCenter,
children: [
pageView,
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Row(
children: [
RaisedButton.icon(
icon: Icon(Icons.menu_book),
label: Text('General'),
onPressed: () {},
),
const Spacer(),
Container(
width: 50,
height: 50,
margin: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
),
child: Icon(Icons.color_lens),
),
Container(
width: 50,
height: 50,
margin: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
),
child: Icon(Icons.person),
),
],
),
)
],
),
),
);
}
}
I'm trying to implement a DropDownButton where the list of items will be displayed from its start.
Meaning, I want the items list to be opened and displayed as if the items list "completes" the DropDownButton - right after the green underline and regardless to the current value (see current behavior below).
I tried looking up online some information of how to achieve it but it yielded nothing. Also, I tried wrapping the DropDownButton with widgets to set the alignment of the drop of items and unfortunately I managed nothing.
What am I missing?
How can I set The DropDownButton's list to be opened so that the items will be aligned from its start?
here is my code:
final List<String> categories = ['', 'Cakes', 'Chocolate', 'Balloons', 'Flowers', 'Greeting Cards','Gift Cards', 'Other'];
String _currCategory = categories[0];
#override
Widget build(BuildContext context){
return Material(
child: Scaffold(
resizeToAvoidBottomInset: true,
resizeToAvoidBottomPadding: false,
backgroundColor: Colors.transparent,
key: _scaffoldKeyMainScreen,
appBar: AppBar(
centerTitle: true,
elevation: 0.0,
backgroundColor: Colors.lightGreen[800],
actions: <Widget>[
///Checkout - cart
IconButton(
icon: Icon(Icons.shopping_cart_outlined),
onPressed: () {}
),
/// WishList
IconButton(
icon: Icon(Icons.favorite),
onPressed: () => {}
],
leading: Icon(Icons.logout),
title: Text('My app'),
),
body: Stack(
alignment: Alignment.center,
children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width * 0.35,
color: Colors.lightGreen[800],
),
),
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
child: Container(
color: Colors.white,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: Align(
alignment: Alignment.center,
child: Container(
color: Colors.transparent,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(11.0),
child: Center(
child: Text(' Sort by: ',
style: TextStyle(
color: Colors.black,
),
),
),
),
Container(
color: Colors.transparent,
child: Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.transparent,
buttonTheme: ButtonTheme.of(context).copyWith(
alignedDropdown: true,
)
),
child: DropdownButton<String>(
dropdownColor: Colors.white,
underline: Container(
height: 2,
color: Colors.lightGreen[300],
),
icon: Icon(Icons.keyboard_arrow_down_outlined,
color: Colors.lightGreen[200],
),
elevation: 8,
value: _currCategory,
items: categories
.map<DropdownMenuItem<String>>((e) => DropdownMenuItem(
child: Text(e, style: TextStyle(color: Colors.lightGreen[300]),),
value: e,
)
).toList(),
onChanged: (String value) {
setState(() {
_currCategory = value;
});
},
)
),
),
///in my app I have a GridView that is built from items loaded from Firebase
///but I think it has nothing to do with the current problem so I placed a symbolic text
Center(child: Text(_currCategory)),
],
),
),
),
),
],
),
),
),
]
),
)
);
}
current behavior: App Demo of Current Behavior
I was finally able to solve this and found exactly what I was looking for here:
https://stackoverflow.com/a/59859741/13727011
Also, there is an excellent YouTube tutorial on how to implement such Dropdown here:
https://youtu.be/j5DkShqvIAU
I am having problem displaying results using ListView.Builder widget. When i placed it on the main.dart page no matter what i do, the page constantly coming up with render errors. Immediately i put it in a separate page, it displayed correctly without error. The page(main.dart) display perfectly without any error without the listView.builder.
My question is it possible or otherwise to display ListView.Builder alongside other widgets on the same page or must it be displayed on a separate page?
Any help will be appreciated.
body: TabBarView(
children: <Widget>[
SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
// child: SingleChildScrollView(
// scrollDirection: Axis.vertical,
child:Container(
child: Column(
//crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child:Expanded(
child: Image.asset("assets/images/1frenchToast.webp"),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text("Select Cuisine",style: TextStyle(color: Colors.black),),
GestureDetector(
child: DropdownButton(
//isDense: true,
style: TextStyle(fontSize: 14,color: Colors.black,),
value: dropDownSelectedItemState,
items: items,
onChanged: (String selectValue){
ClassHub().mySharedPreference("cuisineChoice", "set", selectValue);
ClassHub().getFoodCategory(selectValue).then((onValue){
if(onValue !=null){
setState(() {
foodCategory = onValue;
});
}
});
setState(() {
dropDownSelectedItemState = selectValue;
});
},
),
onLongPress: (){
},
),
],
),
// This is the portion causing issues
Column(
//mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
//myListView(),
Container(
child: ListView.builder(scrollDirection: Axis.vertical,
itemCount: foodCategory.length
itemBuilder: (context,index){
return ListTile(
title: Text(foodCategory[index].foodType),
);
},
),
),
]
),
Container(
//height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 20,),
height: 60,
width: MediaQuery.of(context).size.width-20,
child: ListTile(
leading: CircleAvatar(
minRadius: 10,
maxRadius: 30,
//child:Image.asset("assets/images/Capture.JPG",height: 60,width: 60,),
//borderRadius: BorderRadius.circular(30),
backgroundImage: ExactAssetImage('assets/images/Capture.JPG'),
),
title: Text("Western Food Recipes"),
),
),
],
),
Container(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
height: 60,
width: MediaQuery.of(context).size.width-20,
child:ListTile(
leading: Image.asset("assets/images/Capture.JPG"),
// borderRadius: BorderRadius.circular(30),
// ),
title: Text("African Food Recipes"),
),
),
],
),
Container(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
height: 60,
width: MediaQuery.of(context).size.width-20,
child:ListTile(
leading: Image.asset("assets/images/Capture.JPG"),
// borderRadius: BorderRadius.circular(30),
// ),
title: Text("African Food Recipes"),
),
),
],
),
],
),
),
// ),
),
],
),
),
I want to be able to display ListView.Builder widget on the same page with other widgets without any render error. Is this possible or not?
What you need is shrinkWrap = true inside ListView.builder.
Else the children will wont know how much space to take in the scrollable widget.
you must have to pass the builder_context and use this is ListView.Builder function it might help you