Different icons with if else statement - firebase

I am using the following code in my Flutter application:
Row(
children: [ _loading ? CircularProgressIndicator():
//if(Text(data_snap['icon_spec'].toString()) == "abc"){
new Container(
width: SizeConfig.safeBlockHorizontal * 24,
alignment: Alignment.centerLeft,
child: Text(
'Test: ',
style: new TextStyle(
fontSize: SizeConfig.blockSizeHorizontal * 4, color: Colors.grey[750],
fontWeight: FontWeight.bold),
)),
new Container(
width: SizeConfig.safeBlockHorizontal * 10,
alignment: Alignment.centerLeft,
child: new IconTheme(
data: new IconThemeData(
color: Colors.yellow),
child: new Icon(Icons.trending_neutral_rounded),
),
),
new Container(
width: SizeConfig.safeBlockHorizontal * 16,
alignment: Alignment.centerLeft,
child: Text(
'Text: ',
style: new TextStyle(
fontSize: SizeConfig.blockSizeHorizontal * 4, color: Colors.grey[750],
fontWeight: FontWeight.bold),
)),
new Container(
width: SizeConfig.safeBlockHorizontal * 21,
child: Text(data_snap['abc'].toStringAsFixed(2)),
),
],
),
Depending on the "icon_spec" from Firebasedata I would like to change the Icon and its color. For example: if "icon_spec = abc", the Icon should be a yellow trending_neutral_rounded. When "icon_spec = def", the Icon should be a red trending_down_rounded.
I tried it with the commented line in the code above but it doesn't work inside this children.
How can I change the Icon and its color depending on the value from Firebase?


Container(
width: SizeConfig.safeBlockHorizontal * 10,
alignment: Alignment.centerLeft,
child: IconTheme(
data:data_snap['icon_spec'].toString() == "abc" ?
IconThemeData(
color: Colors.yellow),
child: Icon(Icons.trending_neutral_rounded),
):data_snap['icon_spec'].toString() == "def" ? IconThemeData(
color: Colors.yellow),
child: Icon(Icons.trending_neutral_rounded),
):IconThemeData(),
),

Related

using background picture, not able to make my screen scrollable

my screen is not getting scrollable. I am using background picture and i want it to be scrollable as well because when i used single child scrollable widget as a parent of container after background picture, it worked by back ground image didn't scrolled.
Stack(children: [
const BackgroundPicture(),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 30,
vertical: 50,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset(
'assets/Frame.png',
),
const SizedBox(
height: 60,
),
const SizedBox(
width: 400,
child: Text(
'Where would you like to start',
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 40,
color: Colors.black,
fontWeight: FontWeight.w100),
),
),
const SizedBox(
height: 50,
),
Center(
child: Container(
height: MediaQuery.of(context).size.height * 0.6,
width: MediaQuery.of(context).size.width * 0.8,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: const Color(0xffF3F2F2),
boxShadow: const [
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.08),
blurRadius: 20,
spreadRadius: 5,
offset: Offset(0, 3), // changes position of shadow
),
],
),
),
),
],
),
)
]);

You can just wrap your Stack in a SingleChindScrollView Widget, this widgets allows the scroll.
SingleChildScrollView(
child: Stack(
children: [
const BackgroundPicture(),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 30,
vertical: 200,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset(
'assets/Frame.png',
),
const SizedBox(
height: 60,
),
const SizedBox(
width: 400,
child: Text(
'Where would you like to start',
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 40,
color: Colors.black,
fontWeight: FontWeight.w100),
),
),
const SizedBox(
height: 50,
),
Center(
child: Container(
height: MediaQuery.of(context).size.height * 0.6,
width: MediaQuery.of(context).size.width * 0.8,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: const Color(0xffF3F2F2),
boxShadow: const [
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.08),
blurRadius: 20,
spreadRadius: 5,
offset: Offset(0, 3), // changes position of shadow
),
],
),
),
),
],
),
)
],
),
);

LinearGradient button figma to flutter

My CSS:
background: linear-gradient(91.97deg, #F8A170 14.73%, #FFCD61 97.52%);
border-radius: 10px;
I want to go with flutter but when I give these colors to the container widget with child elevated button, I can't get the result I want. I made the button style transparent, but still I couldn't solve it.

Based on your image and css, You can simply decorate the style of ElevatedButton.
DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: const LinearGradient(
colors: [
Color(0xFFF8A170),
Color(0xFFFFCD61),
],
),
),
child: SizedBox(
width: 400,
height: 75,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 0,
primary: Colors.white.withOpacity(0),
padding: const EdgeInsets.all(0),
),
onPressed: () {},
child: const Text(
"Search a room",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 22,
),
),
),
),
),
More about
DecoratedBox and ElevatedButton

Please refer to below example code
Using Elevated Button
LinearGradient yellowLinearGradientValues() {
return LinearGradient(
colors: [Colors.orange, Color(0xffFFB800).withOpacity(0.65)],
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
elevation: 0.0,
padding: EdgeInsets.zero,
primary: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
side: BorderSide(
width: 0.0,
color: Colors.orange,
style: BorderStyle.none,
),
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
gradient: yellowLinearGradientValues(),
),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: 40.0,
vertical: 8.0,
),
child: Text(
"Search a Room" ?? "",
textAlign: TextAlign.start,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24.0,
),
),
),
),
),
),
);
}
LinearGradient yellowLinearGradientValues() {
return LinearGradient(
colors: [Colors.orange, Color(0xffFFB800).withOpacity(0.7)],
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.transparent),
elevation: MaterialStateProperty.all(0.0),
padding: MaterialStateProperty.all(EdgeInsets.zero),
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
gradient: yellowLinearGradientValues(),
),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: 40.0,
vertical: 8.0,
),
child: Text(
"Search a Room" ?? "",
textAlign: TextAlign.start,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24.0,
),
),
),
),
),
),
);
}

How to create horizontal ListView.builder

Hey there i want to make horizontal ListView.builder but it shows error that 'BoxConstraints forces and infinite width'. Actually i want to make a 'Buyer Request' page like Fiverr.
I achieved my goal using PageView.builder but when i use
if(snapshot.connectionState == ConnectionState.waiting)
return SpinKitDoubleBounce(color: kPrimaryColor);
it brings me back to 1st index whenever i swipe to next index.
So i want to use ListView.builder instead. Here is my code: (Hope someone will solve my problem)
if (snapshot.hasData)
return SizedBox(
child: ListView.builder(
// scrollDirection: Axis.horizontal,
itemCount: indexLength,
controller: PageController(viewportFraction: 1.0),
// onPageChanged: (int index) => setState(() => _index = index),
itemBuilder: (_, i) {
return SingleChildScrollView(
child: Card(
margin: EdgeInsets.all(10),
child: Wrap(
children: <Widget>[
ListTile(
leading: CircleAvatar(
backgroundColor: kPrimaryColor.withOpacity(0.8),
backgroundImage: AssetImage('assets/images/nullUser.png'),
child: snapshot.data[i]['PhotoURL'] != null
? ClipRRect(
borderRadius: BorderRadius.circular(50),
child:
Image.network(snapshot.data[i]['PhotoURL'],
width: 50,
height: 50,
fit: BoxFit.cover,),
)
: ClipRRect(
borderRadius: BorderRadius.circular(50),
child:
Image.asset('assets/images/nullUser.png',
width: 50,
height: 50,
fit: BoxFit.cover,),
)
),
title: Text(
snapshot.data[i]['Email'],
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
color: Colors.black.withOpacity(0.7),
),
),
subtitle: Text(
snapshot.data[i]['Time'],
style: TextStyle(
color: Colors.black.withOpacity(0.6)),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(5)),
color: Colors.grey[200],
),
padding: EdgeInsets.all(10),
child: Text(
snapshot.data[i]['Description'],
style: TextStyle(
color: Colors.black.withOpacity(0.6)),
),
),
SizedBox(
height: 8,
),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(5)),
border:
Border.all(color: Colors.grey[300])),
child: ListTile(
leading: Icon(Icons.category_outlined),
title: Text(
'Category : ${snapshot.data[i]['Category']}',
style: TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
),
),
SizedBox(height: 8),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(5)),
border:
Border.all(color: Colors.grey[300])),
child: ListTile(
leading: Icon(Icons.location_pin),
title: Text(
snapshot.data[i]['Location'],
style: TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
),
),
SizedBox(height: 8),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(5)),
border:
Border.all(color: Colors.grey[300])),
child: ListTile(
leading: Icon(
Icons.attach_money,
color: kGreenColor,
),
title: Text(
'Budget : Rs.${snapshot.data[i]['Budget']}',
style: TextStyle(
fontSize: 14,
color: kGreenColor,
),
),
),
),
SizedBox(height: 8),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(5)),
border:
Border.all(color: Colors.grey[300])),
child: ListTile(
leading: Icon(Icons.timer),
title: Text(
'Duration : ${snapshot.data[i]['Duration']}',
style: TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
),
),
SizedBox(
height: 35,
),
sendOfferButton(),
SizedBox(
height: 15,
),
Center(
child: Text(
"${i + 1}/$indexLength",
style: TextStyle(fontSize: 13),
),
),
],
),
),
],
),
),
);
},
),
);
If anyone want to see full file.
Check it Here

Use pageview.builder instead :
Container(
height: MediaQuery.of(context).size.height / 3,
width: MediaQuery.of(context).size.width,
child: PageView.builder(
pageSnapping: false,
physics: PageScrollPhysics(),
controller: _pageController,
scrollDirection: Axis.horizontal,
itemCount:
_articleController.articleListDat.length,
itemBuilder: (context, index) {
return Container();
}
And pagecontroller
PageController _pageController =
PageController(initialPage: 2, viewportFraction: 0.9);

First wrap your ListView.builder into LimitedBox / container then set height on it. Then add
scrollDirection: Axis.horizontal,
It's Done

How to hide a single item from a stream builder

Hi I have a stream builder that lists containers with a button to count down and when the counter hits zero I wanted to hide that single container from the list I can’t figure out how to, if anyone does please help
bool visibility = true;
Widget _dataList() {
if (data != null) {
return StreamBuilder(
stream: data,
builder: (context, snapshot) {
return ListView.builder(
itemCount: snapshot.data.documents.length,
padding: EdgeInsets.all(5.0),
itemBuilder: (context, i) {
return visibility == true
? new Container(
child: Padding(
padding: EdgeInsets.only(top: 5, right: 5, left: 5),
child: Material(
borderRadius: BorderRadius.circular(20),
elevation: 9,
color:
Theme.of(context).cardColor.withOpacity(.95),
shadowColor:
Theme.of(context).accentColor.withOpacity(.5),
child: Container(
padding: EdgeInsets.only(
bottom: 10, right: 10, left: 10, top: 15),
height: 210,
decoration: BoxDecoration(
color: Color(0xFF0B0F1B),
borderRadius: BorderRadius.circular(20),
border: Border.all(
width: 1,
color: Colors.grey.withOpacity(0.5))),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(4.0),
child: Text(
'Number Of Participants :-' +
snapshot.data.documents[i]
.data['numberOfParticipants'],
style: TextStyle(
color: Colors.white, fontSize: 15),
),
),
Padding(
padding: const EdgeInsets.only(top: 7.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 40,
),
Material(
borderRadius:
BorderRadius.circular(20),
elevation: 26,
color: Color(0xFF0B0F1B),
child: Container(
height: 30,
width: 120,
decoration: BoxDecoration(
color: Color(0xFF0B0F1B),
borderRadius:
BorderRadius.circular(20),
border: Border.all(
width: 1,
color: Colors.grey
.withOpacity(0.5))),
child: InkWell(
splashColor: Colors.redAccent,
borderRadius:
BorderRadius.circular(20),
child: Center(
child: Text(
'View',
style: TextStyle(
color: Color(0xFFC77AF3),
fontSize: 18),
)),
onTap: () {
int currentval = int.parse(
snapshot.data.documents[i]
.data[
'numberOfParticipants']);
setState(
() {
currentval--;
snapshot.data.documents[i]
.data[
'numberOfParticipants'] =
currentval.toString();
if (currentval == 0) {
visibility = false;
}
},
);
},
),
),
),
SizedBox(
width: 85,
),
Material(
borderRadius:
BorderRadius.circular(20),
elevation: 26,
color: Color(0xFF0B0F1B),
child: Container(
height: 30,
width: 120,
decoration: BoxDecoration(
color: Color(0xFF0B0F1B),
borderRadius:
BorderRadius.circular(20),
border: Border.all(
width: 1,
color: Colors.grey
.withOpacity(0.5))),
child: InkWell(
splashColor: Colors.greenAccent,
borderRadius:
BorderRadius.circular(20),
child: Center(
child: Text(
'Join',
style: TextStyle(
color: Colors.greenAccent,
fontSize: 18),
)),
onTap: () {
setState(
() {},
);
},
),
),
),
],
),
),
],
),
),
),
),
)
: new Container();
},
);
});
} else {
return Center(child: Text('Nothing yet'));
}
}
this is my code i tried to accomplish the visibility by an empty container because i don't want it to hold a place but the problem is it hides all other containers with it the whole list goes invisible

You can use Opacity with an opacity: of 0.0 to draw make an element hidden but still occupy space.
To make it not occupy space, replace it with an empty Container().
EDIT: To wrap it in an Opacity object, do the following:
new Opacity(opacity: 0.0, child: new Padding(
padding: const EdgeInsets.only(
left: 16.0,
),
child: new Icon(pencil, color: CupertinoColors.activeBlue),
))
Google Developers quick tutorial on Opacity: https://youtu.be/9hltevOHQBw
you can also try
Visibility(
visible: false,
child: child
)
);

Flutter DateTime , Open Close if

I want to show between 09:00 am - 20:00 pm widget, other time another widget so
for example now 13:00 my shop open I want to show open my shop.
thanks
openSaat() {
return Container(
width: 170,
height: 40,
decoration: BoxDecoration(color: Colors.black),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.green,
radius: 12,
),
SizedBox(width: 5,),
Text("Open Now",style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold,color: Colors.white),)
],
),
);
}
closeSaat() {
return Container(
width: 170,
height: 40,
decoration: BoxDecoration(color: Colors.black),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.red,
radius: 12,
),
SizedBox(width: 5,),
Text("Close Now",style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold,color: Colors.white),)
],
),
),
);
}

#override
Widget build(BuildContext context) {
return new Scaffold(
body: currentWidget()
);
}
static DateTime now = DateTime.now();
Widget currentWidget() {
var hours = now.hour;
if (hours >= 09 && hours < 21) {
return _openSaat();
} else
return _closeSaat();
}
Widget _openSaat() {
return Container(
width: 170,
height: 40,
decoration: BoxDecoration(color: Colors.black),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircleAvatar(
backgroundColor: Colors.green,
radius: 12,
),
SizedBox(
width: 5,
),
Text(
"Open Now",
style: TextStyle(
fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),
)
],
),
);
}
Widget _closeSaat() {
return Container(
width: 170,
height: 40,
decoration: BoxDecoration(color: Colors.black),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircleAvatar(
backgroundColor: Colors.red,
radius: 12,
),
SizedBox(
width: 5,
),
Text(
"Close Now",
style: TextStyle(
fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),
)
],
),
),
);
}

Resources