Related
I am using a package sliding_up_pannel to make my bootomsheet I need to make this scrollable so that is why i am using listview but it is not working properly. At pannel builder property i am giving blur effect and then i am giving my pannel widget which is accepting controller and close pannel call back. in pannel widget at build method i am returning the listview which has different widgets in its children. here is my code of sliding up pannel.
#override
Widget build(BuildContext context) {
return ScreensMainCard(
margin: const EdgeInsets.only(top: 105),
child: SlidingUpPanel(
//TODO: Add Maps Here
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: const BoxDecoration(
borderRadius: BorderRadius.vertical(top: Radius.circular(30)),
image: DecorationImage(
image: AssetImage("images/maps.PNG"), fit: BoxFit.cover)),
),
maxHeight: MediaQuery.of(context).size.height,
minHeight: MediaQuery.of(context).size.height * closedPanel,
color: Colors.transparent,
borderRadius: const BorderRadius.vertical(top: Radius.circular(30)),
panelBuilder: (controller) => BackdropFilter(
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
child: PanelWidget(
closePanel: closePanel,
controller: controller,
),
),
),
);
}
here is code of my pannel widegt.
Widget build(BuildContext context) {
return ListView(
shrinkWrap: true,
physics: const AlwaysScrollableScrollPhysics(),
controller: controller,
padding: EdgeInsets.zero,
children: [
SizedBox(height: 10),
buildDragHandle(),
SizedBox(height: 40),
Center(
child: Text(
'About',
style: TextStyle(fontSize: 20, fontWeight:
FontWeight.bold),
),
),
SizedBox(height: 20),
Gauges(),
SizedBox(height: 20,),
GestureDetector(
onTap: () {},
child: Container(
margin: EdgeInsets.fromLTRB(25, 0, 20, 25),
height: 50,
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(30)),
color: kViveLaCarViolet,
),
alignment: Alignment.center,
child: Text(
"RESERVATION",
style: kLoginRegisterScreenButtonTextStyle,
),
),
),
LockUnlockButton(),
Container(
margin: EdgeInsets.symmetric(horizontal: 15),
height: 140,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15)),
color: kViveLaCarWhite,
),
],
);
}
I have no idea how to change the state of my grid view when a button is clicked can someone help me with this?
So, I have this textButton that should change the state of my grid view when clicked but I have no idea how to implement it. Below is my code.
From the image attached, when water, food, school etc are clicked the gridview should only provide specific organizations..
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(20.0),
child: ListView(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
padding: const EdgeInsets.only(left: 20, right: 20),
height: SizeConfig.screenHeight / 6.5,
color: kPrimaryColor,
child: Row(
children: [
const CircleAvatar(
radius: 40,
backgroundImage: AssetImage(
'assets/images/SDG Wheel_Transparent_WEB.png'),
),
const SizedBox(
width: 10,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Donate Today!",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontFamily: "Quicksand",
decoration: TextDecoration.none),
),
SizedBox(
height: 5,
),
Text(
"Small contributions quickly\nadd up if enough people\ntake up the cause.",
style: TextStyle(
color: Colors.white,
fontSize: 12,
decoration: TextDecoration.none),
),
],
),
Expanded(child: Container()),
Container(
width: 70,
height: 70,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Color(0xFFf3fafc)),
child: Center(
child: IconButton(
icon: SvgPicture.asset("assets/icons/give.svg"),
onPressed: () {},
color: Color(0xFF69c5df),
//size: 30,
),
),
),
],
),
),
),
SizedBox(
height: 30,
),
const Align(
alignment: Alignment.centerLeft,
child: Text(
"Select your desired organisation to donate.",
style: TextStyle(
color: Color(0xFF1f2326),
fontSize: 15,
decoration: TextDecoration.none),
),
),
const Divider(color: Colors.black38),
//here is the textButton
Container(
height: 50,
width: double.infinity,
color: Colors.white,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
for (int i = 0; i < categories.length; i++)
Container(
width: 90,
padding: const EdgeInsets.only(left: 4.0, right: 4.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: kPrimaryColor,
),
child: TextButton(
onPressed: () {}, //here i need a way to change the state of
the grid view
child: Text(categories[i],
style: TextStyle(color: Colors.white)),
),
),
),
],
),
),
),
const Divider(color: Colors.black38),
const SizedBox(
height: 30,
),
GridView.count(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
children: _listItem
.map((item) => Card(
color: Colors.transparent,
elevation: 0,
child: GestureDetector(
onTap: () => Navigator.pushNamed(context, item.route),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: AssetImage(item.image),
fit: BoxFit.cover)),
)),
))
.toList(),
)
],
),
);
}
}
Thanks very much.
The simplest things to do is to Filter your items based on selection by using the .where of Iterable https://api.flutter.dev/flutter/dart-core/Iterable/where.html
Basically when you push your Text button you store the type in a variable (you need a StatefulWidget for that)
then you can use where to filter your _listItem
GridView.count(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
children: _listItem
.where((element) {
//if your element is included return true else false
return true;
})
.map((item) => Card(
color: Colors.transparent,
elevation: 0,
child: GestureDetector(
onTap: () => Navigator.pushNamed(context, item.route),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: AssetImage(item.image),
fit: BoxFit.cover)),
)),
))
.toList(),
)
You can check a sample here for the behavior on the button:
https://dartpad.dev/49f2e4818d933c75a0e6ed1d47a836d2
I'm new to flutter and working on developing my flutter coding skills. I want to display 3 background images in a carousel while other texts and button remain same on the screen. in the below code, image carousel is working properly but my Get Started button and other texts not displaying at all. what should I do for correct this issue. appreciate your help on this.
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class Test extends StatelessWidget {
#override
Widget build(BuildContext context) {
SystemChrome.setEnabledSystemUIMode(SystemUiMode.leanBack);
return Scaffold(
body: ListView(
children: [
CarouselSlider(
items: [
//1st Image of Slider
Container(
color: Colors.black,
child: Stack(
children: [
Positioned.fill(
child: Opacity(
opacity: 0.8,
child: Image.asset('assets/images/person1.png',
fit: BoxFit.cover),
),
),
Container(
color: Color.fromRGBO(5, 65, 196, 0.19),
),
],
),
),
//2nd Image of Slider
Container(
color: Colors.black,
child: Stack(
children: [
Positioned.fill(
child: Opacity(
opacity: 0.8,
child: Image.asset('assets/images/person2.png',
fit: BoxFit.cover),
),
),
Container(
color: Color.fromRGBO(5, 65, 196, 0.19),
),
],
),
),
//3rd Image of Slider
Container(
color: Colors.black,
child: Stack(
children: [
Positioned.fill(
child: Opacity(
opacity: 0.8,
child: Image.asset('assets/images/person3.png',
fit: BoxFit.cover),
),
),
Container(
color: Color.fromRGBO(5, 65, 196, 0.19),
),
],
),
),
],
//Slider Container properties
options: CarouselOptions(
height: 810.0,
enlargeCenterPage: true,
autoPlay: true,
aspectRatio: 16 / 16,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: true,
autoPlayAnimationDuration: Duration(milliseconds: 800),
viewportFraction: 1,
),
),
Padding(
padding: const EdgeInsets.only(left: 40, bottom: 230),
child: Align(
alignment: Alignment.bottomLeft,
child: Text('Meet \nYour Doctor\nHere',
style: TextStyle(
height: 1.2,
fontFamily: 'Dubai',
fontSize: 35,
color: Color(0xffFAFAFA),
fontWeight: FontWeight.w500,
))),
),
Padding(
padding: const EdgeInsets.only(left: 30, top: 26),
child: Align(
alignment: Alignment.topLeft,
child: Text('DOCTOR',
style: TextStyle(
fontFamily: 'Dubai',
fontSize: 30,
color: Colors.white,
fontWeight: FontWeight.w500,
))),
),
Padding(
padding: const EdgeInsets.only(bottom: 60),
child: Align(
alignment: Alignment.bottomCenter,
child: SizedBox(
width: 320,
height: 65,
child: ElevatedButton(
onPressed: () {},
child: Text(
'Get Started',
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.normal),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(
Color(0xff05ABA3)),
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(50.0),
),
))),
)),
),
Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
color: Colors.white,
),
height: 5,
width: 120,
))),
],
),
);
}
}
you can set image in background using BoxDecoration in container-
Container(
height: 120.0,
width: 120.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'imagename'),
fit: BoxFit.fill,
),
shape: BoxShape.circle,
),
)
On your Scaffold's body: you are using ListView. You can still find those widgets by scrolling down.
For your case, you like to have text and button widgets over the UI.
You need to replace ListView with Stack on body.
return Scaffold(
body: Stack( // this
children: [
CarouselSlider
More about Stack and ListView.
I'm a newbie in Flutter and I'm trying to design a page to let the user choose the user type.
And I'm trying to use onTap method so that when I click on the picture I go to the selected user type page but when I used the onTap method the user type image disappears.
I don't know if I'm using the right method or if I'm using it in a wrong way.
But here is what my code looks like you maybe able to help me :)
thank you
import 'package:flutter/material.dart';
class ChooseUser extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
body: new Container(
padding: const EdgeInsets.fromLTRB(0, 250, 0, 0),
child: new Column(
children: [
new Container(
alignment: Alignment(0.4, 0.2),
child: new Text(
"فضلًا أختر نوع المستخدم",
style: TextStyle(
fontSize: 30,
fontFamily: 'Cairo',
color: Color(0xFF403E3E),
shadows: [
Shadow(
color: Color(0xFF403E3E),
offset: Offset(1, 1),
blurRadius: 1)
]),
),
),
new Container(
height: 300.0,
width: 300.0,
padding: const EdgeInsets.fromLTRB(15, 120, 0, 0),
child: new Row(children: [
new Column(
children: [
new Container(
margin: const EdgeInsets.only(right: 40.0),
height: 100.0,
width: 100.0,
decoration: new BoxDecoration(
image: DecorationImage(
image: new AssetImage(
'assets/images/elderly-icon.png'),
fit: BoxFit.fill),
),
),
new Container(
margin: const EdgeInsets.only(right: 40.0, top: 10),
child: new Text(
"كبير سن",
style: TextStyle(
fontSize: 20,
fontFamily: 'Cairo',
color: Color(0xFF403E3E),
shadows: [
Shadow(
color: Color(0xFF403E3E),
offset: Offset(1, 1),
blurRadius: 1)
]),
)),
],
),
new Column(children: [
GestureDetector(
onTap: () {
Navigator.of(context).pushNamed('medical-choose');
new Container(
margin: const EdgeInsets.only(left: 20.0),
height: 100.0,
width: 100.0,
decoration: new BoxDecoration(
image: DecorationImage(
image: new AssetImage(
'assets/images/staff-icon.png'),
fit: BoxFit.fill),
),
);
new Container(
margin: const EdgeInsets.only(left: 10.0, top: 10),
child: new Text(
"طاقم طبي",
style: TextStyle(
fontSize: 20,
fontFamily: 'Cairo',
color: Color(0xFF403E3E),
shadows: [
Shadow(
color: Color(0xFF403E3E),
offset: Offset(1, 1),
blurRadius: 1)
]),
),
);
},
),
]),
])),
],
),
),
),
);
}
}
On the onTap() method, usually nothing is rendered in the function.
The GestureDetector should have the image as a child and the onTap() would just have the Navigator.pushNamed
Something like this:
GestureDetector(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/staff-icon.png'
),
fit: BoxFit.fill
)
)
)
),
onTap: (){
Navigator.of(context).pushNamed('medical-choose');
},
);
first of all the new keyword are optional, second there is no need to use GestureDetector instead use InkWell widget which is the basic of all clickable widget.
InkWell(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/staff-icon.png'
),
fit: BoxFit.fill
)
)
)
),
onTap: () {
Navigator.of(context).pushNamed('medical-choose');
},
);
Please help me or give me an idea on how to implement the above image. I'm planning to use ListView. Below is my sample code but this is on horizontal scroll.
Widget build(BuildContext context) {
return Container(
height: 210,
color: Theme.of(context).primaryColor,
padding: EdgeInsets.symmetric(vertical: 10),
child: ListView.builder(
itemCount: _foodsList.featuredList.length,
itemBuilder: (context, index) {
double _marginLeft = 0;
(index == 0) ? _marginLeft = 20 : _marginLeft = 0;
return FoodsCarouselItemWidget(
heroTag: 'home_food_carousel',
marginLeft: _marginLeft,
food: _foodsList.featuredList.elementAt(index),
);
},
scrollDirection: Axis.horizontal,
));
}
}
You need to build your layout in itemBuilder property of ListView. If you want to place the text on the image the best layout widget is Stack.
See the following in order to get the layout system of flutter: https://flutter.io/tutorials/layout/
and for all the available layout widgets see: https://flutter.io/widgets/layout/
and Stack: https://docs.flutter.io/flutter/widgets/Stack-class.html
Something like this:new Stack(
children: <Widget>[
new Positioned.fill(
child: new FadeInImage(
placeholder: new AssetImage('placeholder.png'),
image: new CachedNetworkImageProvider(photos[int].url),
fit: BoxFit.contain,
alignment: Alignment.center,
fadeInDuration: new Duration(milliseconds: 200),
fadeInCurve: Curves.linear,
),
),
new Positioned(
top: 10.0,
left: 10.0,
child: new Container(
child: new Text(photos[int].title)
),
),
],
)
I have tried my best to achieve the same, but due to time issues, you might find a little different.
Package used: https://pub.dev/packages/cached_network_image#-installing-tab-
Here is the complete code.
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
class Demo extends StatefulWidget {
#override
_Demo createState() => _Demo();
}
class _Demo extends State<Demo> {
Widget foodsCarouselItemWidget() {
return Column(children: <Widget>[
SizedBox(height: 10),
Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 15.0,
)
],
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(5.0)),
),
child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: <
Widget>[
Container(
height: 130,
width: 130,
child: Stack(
children: <Widget>[
CachedNetworkImage(
width: 150,
height: 130,
imageUrl:
"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQt46Q_GYs7kSq21kdBlNcD9pZzHVtl8nwNkY5f9GaR3rTbPOMf",
imageBuilder: (context, imageProvider) => Container(
decoration: BoxDecoration(
image: DecorationImage(
image: imageProvider, fit: BoxFit.cover),
borderRadius: BorderRadius.all(Radius.circular(10.0)),
),
),
),
Positioned(
right: 10,
bottom: 5,
child: Row(children: <Widget>[
Icon(Icons.playlist_add_check,
color: Colors.white, size: 18),
SizedBox(width: 3),
Text("190",
style: TextStyle(color: Colors.white, fontSize: 12))
])),
],
),
),
SizedBox(width: 15),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Food title here",
style: TextStyle(
color: Color(0xff454545),
fontSize: 18,
fontWeight: FontWeight.bold)),
SizedBox(height: 10),
Row(children: <Widget>[
Icon(Icons.location_on, color: Color(0xff777777), size: 18),
SizedBox(width: 5),
Expanded(
child: Text("Add your location here",
style: TextStyle(
fontSize: 13, color: Color(0xff777777))))
]),
SizedBox(height: 5),
Row(children: <Widget>[
Icon(Icons.local_offer, color: Color(0xff777777), size: 18),
SizedBox(width: 5),
Expanded(
child: Text("Spicy, Delicious",
style: TextStyle(
fontSize: 13, color: Color(0xff777777))))
]),
SizedBox(height: 15),
Row(children: <Widget>[
Expanded(
flex: 1,
child: Container(
decoration: BoxDecoration(
color: Colors.red[900],
borderRadius:
BorderRadius.all(Radius.circular(5.0))),
padding: EdgeInsets.all(10),
child: Text(
"Button Text",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
)),
SizedBox(width: 7),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red[900]),
borderRadius: BorderRadius.all(Radius.circular(5.0))),
padding: EdgeInsets.all(5),
child:
Icon(Icons.bookmark_border, color: Colors.red[900]),
)
])
]))
])),
SizedBox(height: 10)
]);
}
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xfff3f3f3),
appBar: AppBar(backgroundColor: Colors.red[900], title: Text("DEMO")),
body: ListView.builder(
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 20),
itemCount: 4,
itemBuilder: (context, index) {
return foodsCarouselItemWidget();
},
));
}
}
OUTPUT: