ListTile at the bottom of the screen - flutter

I want a List Tile from my Menu at the bottom of the screen. I done it with a Sized box, it worked for my Nokia 7.1, but when I debug with another phone with a another resulution the solution doesn´t work, because I customized the box for the Nokia and not for another phones. Now I don´t konw how I can do it. I tried by using an Container istead of a Drawer, but it doesn´t slove the problem. Here is my Code:
return Drawer(
child: ListView(
physics: NeverScrollableScrollPhysics(),
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.green,
),
child: Text(
'Menü',
style: GoogleFonts.oswald(
textStyle: TextStyle(
color: Colors.black,
fontSize: 45,
)
),
),
),
[ListTiles]
This is the List Tile I want at the bottom:
// this is my first attempt:
/*SizedBox(
height: 410,
),*/
ListTile(
leading: Icon(Icons.arrow_back_outlined,
color: Colors.black,
size: 30,
),
title: Text('Back',
style: GoogleFonts.raleway(
textStyle: TextStyle(
color: Colors.black,
fontSize: 30,
)
)
),
onTap: () => Navigator.pop(context),
),
],
),
);

Judging by the ListView combined with physics: NeverScrollableScrollPhysics(), I think a refactor to the following solution might also work for you (condensed for brevity):
Drawer(child:
CustomScrollView(
physics: NeverScrollableScrollPhysics(),
slivers: <Widget>[
SliverToBoxAdapter(child:
Column(children: [
DrawerHeader(decoration: BoxDecoration(color: Colors.green), child: Text('Menü')),
// all of your list tiles
],
crossAxisAlignment: CrossAxisAlignment.stretch,
),
),
SliverFillRemaining(child:
Align(child:
ListTile(
leading: Icon(Icons.arrow_back_outlined, color: Colors.black, size: 30),
title: Text('Back'),
onTap: () => Navigator.pop(context),
),
alignment: Alignment.bottomCenter,
),
hasScrollBody: false,
)
],
)
)

Related

Favourite list button on product

i want to make an this function on the product but i don't know how to since I'm too fresh with flutter...
so here is the picture of how I want it to be
The Sample
and here is my codes.
child: GridTile(
footer: Container(
color: Colors.white,
child: Row(
children: [
Expanded(
flex: 8,
child: Text(product_name),
),
Text("\$$product_price",
style: const TextStyle(fontWeight: FontWeight.w600)),
TextButton(
onPressed: (){
debugPrint('added to cart');
},
child: Text("ADD TO CARD"),
style: TextButton.styleFrom(
primary: Colors.lightBlue[800],
shadowColor: Colors.deepPurple,
// elevation: 5,
),
),
],
),
),
child: Image.asset(
product_picture,
fit: BoxFit.cover,
),
),
),
),
),
and it is how it looks
How it looks
I will appreciate any help!
Here is something similar to the sample
GridView.count(
shrinkWrap: true,
childAspectRatio: .8,
crossAxisCount: 2,
mainAxisSpacing: 4,
crossAxisSpacing: 4,
children: List.generate(10, (index) {
return Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Image.network('https://i.ytimg.com/vi/6OovMIjDtAM/maxresdefault.jpg',)
),
const SizedBox(height: 14),
const Text('My Drink 101',
style: TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.w600),
),
const SizedBox(height: 14),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('500 ml', style: TextStyle(color: Colors.black, fontSize: 14, fontWeight: FontWeight.w300)),
Text('\$500 ml', style: TextStyle(color: Colors.black, fontSize: 14, fontWeight: FontWeight.w300)),
],
),
),
const SizedBox(height: 16),
Container(
alignment: Alignment.centerRight,
child: InkWell(
onTap: () {
// add to cart
},
child: Icon(Icons.shopping_cart_outlined, color: Colors.blue,),
),
),
],
),
Align(
alignment: Alignment.topLeft,
child: InkWell(
onTap: () {
// add to favourite
},
child: const Padding(
padding: EdgeInsets.all(8.0),
child: Icon(
Icons.favorite_border,
color: Colors.white,
),
),
),
),
],
),
);
}),
)
Well, there is a bunch needed to make a card similar to the sample you provided. Take a look at this video to get some ideas. I would recommend you to read the flutter widgets documentation for a better understanding of how each property work.
This channel also has a lot of great flutter UI content that is worthy to have a look at.
To start I would consider using a Card instead of a Container

How to make fixed button flutter?

I have a problem with fixed button inside scroll view , I made a column with SingleChildScrollView and two button, but the problem is that the screen do not scroll. I tried the bottom Navigation bar but it has the same problem. How I can fix this?
my code :
Column(
children: [
Expanded(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children: [
ListView.builder(
shrinkWrap: true,
itemCount: 200,
itemBuilder: (context, index) {
return Text("200");
},
),
ListView.builder(
shrinkWrap: true,
itemCount: 20,
itemBuilder: (context, index) {
return Text("bargougui");
},
),
],
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Container(
width: 150,
height: 50,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.grey[300],
),
onPressed: () {},
child: Text(
'Contacter',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
color: Colors.black,
fontStyle: FontStyle.italic,
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Container(
width: 150,
height: 50,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.yellow,
),
onPressed: () {},
child: Text(
'Acheter',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
color: Colors.black,
fontStyle: FontStyle.italic,
),
),
),
),
),
),
],
),
],
),
screen I want to make like this
any help will be appreciated ^^
Use Stack widget,
Stack(
children:[
SingleChildScrollView(),
Positioned(
bottom:0,
left:15,
right:15,
child:Row(children :[Button1(),Button2()],
,)
]
Try tweaking the numbers to fit your case.

Flutter Stack Widget has Whitespace for some unknown reason

I'm still having trouble with Flutter's approach to laying out widgets.
There's this 'whitespace' that I would remove or cover (see red arrows).
How would I extend the 'image' up to the menu bar?
As you can see in the code below, I'm using a Stack widget.
I don't know what is making the 'whitespace' between the Stack widget and the appbar?? Possibly, it's due to the Crop widget (a third-party package). I'll look into that now, but decided to post this question anyway.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: I10n.t('Playhouse'),
centerTitle: true,
automaticallyImplyLeading: false,
elevation: 0,
excludeHeaderSemantics: true,
),
endDrawer: const ScrapBookDrawer(),
body: Stack(
children: <Widget>[
Crop(
interactive: false,
backgroundColor: Colors.white,
dimColor: Colors.white,
controller: CropController(),
child: Image.memory(
base64.decode(
con.submodule['image'],
),
),
),
SafeArea(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Flexible(
child: Text(
widget.subTask['subName'],
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
),
const Flexible(
child: Text(
'Submodule description',
),
),
]),
const Spacer(),
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.white),
child: Column(
children: <Widget>[
/// Task Name and Number
Padding(
padding: const EdgeInsets.only(
top: 30,
bottom: 20,
),
child: Text(
widget.subTask['name'],
style: const TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold,
),
),
),
/// Short Description or Title
Padding(
padding: const EdgeInsets.only(
top: 10,
),
child: Text(widget.subTask['short_description']),
),
const SizedBox(height: 30),
Flexible(
child: SingleChildScrollView(
physics: const BouncingScrollPhysics(),
child: Text(widget.subTask['long_description']),
),
),
],
),
),
)
],
),
)
],
),
);
}
It seems it is actually due to Crop widget. It automatically determines the aspect ratio of your picture. You should manually set your aspect ratio by adding the aspectRatio parameter to your CropController, something like this:
Crop(
interactive: false,
backgroundColor: Colors.white,
dimColor: Colors.white,
controller: CropController(aspectRatio: 0.75),
child: Image.memory(
base64.decode(
con.submodule['image'],
),
),
)
In your case it seems that aspect ratio of ~0.75 works the best, play around with this to find your best value.

How to create Expandable/Contractable Horizontal ListView?

I am quite new to flutter, but I want to create an app in which my main vertical list could be dragged from bottom part of the screen to above part and when I do that my horizontal listview(as shown in image) will fade away, for this I thought of using SliverAppBar, but I don't know how to add Horizontal ListView to it.
I want to achieve UI something like this.
For starter, try this if you want a SliverAppBar approach but I recommend using a two List instead. One horizontal and one vertical
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
expandedHeight: 300,
centerTitle: true,
pinned: true,
elevation: 4,
floating: true,
title: Text(
'Subscribe Now',
style: TextStyle(color: Colors.white),
),
flexibleSpace: FlexibleSpaceBar(
titlePadding: const EdgeInsets.all(0),
collapseMode: CollapseMode.pin,
background: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 4,
itemBuilder: (BuildContext context, int index) {
return Container(
color: Colors.indigoAccent,
margin: EdgeInsets.only(left: 20, bottom: 16, top: 180),
child: SizedBox(
height: 100,
width: 100,
child: Center(
child: Text('Item No. $index'),
),
),
);
}),
),
),
SliverList(
delegate:
SliverChildBuilderDelegate((BuildContext context, int index) {
return Container(
margin: const EdgeInsets.fromLTRB(16, 8, 16, 12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.black,
),
padding: const EdgeInsets.all(22),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Get 7 days free',
style: Theme.of(context)
.textTheme
.headline
.copyWith(color: Colors.white),
),
const SizedBox(
height: 2,
),
Text(
'Save 50% off',
style: Theme.of(context)
.textTheme
.button
.copyWith(color: Colors.greenAccent),
),
const SizedBox(
height: 6,
),
Text(
'\$60',
style: Theme.of(context).textTheme.headline.copyWith(
fontWeight: FontWeight.w700,
color: Colors.white,
fontSize: 28),
)
],
),
);
}, childCount: 10),
)
],
),
);

How to implement a SliverAppBar with a collapsable search bar

This is what I'm trying to do, it's a pretty common Widget on iOS. This is my code:
return Scaffold(
backgroundColor: Colors.white,
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
automaticallyImplyLeading: false,
pinned: true,
titleSpacing: 0,
backgroundColor: Colors.white,
elevation: 1.0,
title: Container(
width: double.infinity,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
CupertinoButton(
padding: EdgeInsets.all(0),
onPressed: () {},
child: AutoSizeText(
'Ordenar',
style: TextStyle(
color: Color(0xff16161F),
fontFamily: 'Brutal',
fontSize: 17.0,
),
),
),
AutoSizeText(
'Equipos 14',
style: TextStyle(
color: Color(0xff16161F),
fontFamily: 'Archia',
fontSize: 22.0,
),
),
CupertinoButton(
padding: EdgeInsets.all(0),
onPressed: () {},
child: AutoSizeText(
'Editar',
style: TextStyle(
color: Color(0xff16161F),
fontFamily: 'Brutal',
fontSize: 17.0,
),
),
),
],
),
),
centerTitle: true,
),
SliverFillRemaining(
child: Center(
child: CupertinoButton(
onPressed: () {
setState(() {
(isBottom) ? isBottom = false : isBottom = true;
});
},
child: Text('YESSS'),
),
),
),
],
),
bottomNavigationBar: (isBottom) ? _toolBar() : _tabBar(),
);
I've tried adding a CupertinoTextField() to the bottom property, but it gets into my Row() and messes up everything. Has anyone done this, or knows how to achieve it?
Thanks.
I managed to solve it. SliverAppBar has a property called flexibleSpace. In here you put a FlexibleSpaceBar, which contains a background property. Now, don't be fooled, this is not limited to a solid color or an image. It can take any Widget you want. In my case, I wanted to add a search bar. And because this property will fill the entire expandedHeight property, you want to add a small blank space so your custom widgets don't get drawn over your SliverAppBar. Here's the relevant piece of code:
flexibleSpace: FlexibleSpaceBar(
background: Column(
children: <Widget>[
SizedBox(height: 90.0),
Padding(
padding: const EdgeInsets.fromLTRB(16.0, 6.0, 16.0, 16.0),
child: Container(
height: 36.0,
width: double.infinity,
child: CupertinoTextField(
keyboardType: TextInputType.text,
placeholder: 'Filtrar por nombre o nombre corto',
placeholderStyle: TextStyle(
color: Color(0xffC4C6CC),
fontSize: 14.0,
fontFamily: 'Brutal',
),
prefix: Padding(
padding:
const EdgeInsets.fromLTRB(9.0, 6.0, 9.0, 6.0),
child: Icon(
Icons.search,
color: Color(0xffC4C6CC),
),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: Color(0xffF0F1F5),
),
),
),
),
],
),
),
),
And here is the result. The search bar will disappear when the scroll goes up. Hope this helps anyone wanting to do this.