Related
I would like to pass boolean initial boolean values as arguments to a stateful widget and then change its value besides updating the UI. As it stands, I only see the initial value and am not able to toggle the value. The code and the screenshots are as follows:
This is the widget from which I'm passing the arguments:
class OtherStuff extends StatefulWidget {
OtherStuffState createState() => OtherStuffState();
}
class OtherStuffState extends State<OtherStuff> {
#override
Widget build(BuildContext context) {
var provider = Provider.of<ModelClass>(context).data;
// TODO: implement build
return Container(
width: double.infinity,
height: 150,
color: Colors.transparent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: const EdgeInsets.only(left: 5),
child: const Text('Gets more interested with this', style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 18
)),
),
SizedBox(height: 5),
Row(
children: [
StuffCards('https://static.toiimg.com/thumb/60892473.cms?imgsize=159129&width=800&height=800', false), //passing first value as false
SizedBox(width: 10),
StuffCards('https://thestayathomechef.com/wp-content/uploads/2016/06/Fried-Chicken-4-1.jpg', true), //passing second value as true
SizedBox(width: 10),
StuffCards('https://www.foodrepublic.com/wp-content/uploads/2012/03/033_FR11785.jpg', false), //passing third value as false
],
)
],
)
);
}
}
The stateful widget:
class StuffCards extends StatefulWidget {
final String imageUrl;
final bool clickedValue; //receiving the argument
StuffCards(this.imageUrl, this.clickedValue);
StuffCardsState createState() => StuffCardsState();
}
class StuffCardsState extends State<StuffCards> {
#override
Widget build(BuildContext context) {
var clicked = widget.clickedValue;
void clickedFav() {
setState(() {
clicked = !clicked; //toggling the value received
});
}
// TODO: implement build
return Stack(
children: [
// Container(
// width: 120,
// ),
Positioned(
child: Container(
width: 110,
height: 120,
margin: const EdgeInsets.only(left: 10),
decoration: BoxDecoration(
color: Theme.of(context).primaryColorDark,
borderRadius: const BorderRadius.only(
topRight: Radius.circular(100),
topLeft: Radius.circular(100),
bottomRight: Radius.circular(20),
bottomLeft: Radius.circular(20),
)
),
child: Padding(
padding: const EdgeInsets.only(top: 60),
child: Container(
width: double.infinity,
height: 60,
decoration: BoxDecoration(
color: Theme.of(context).primaryColorDark,
),
child: Column(
children: [
Text('Fried Squid', style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white
)),
Container(
width: 75,
color: Colors.transparent,
child: Text(
'₹ 245', style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 20
)),
),
Container(
width: double.infinity,
height: 16,
padding: EdgeInsets.only(right: 2, bottom: 1),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
InkWell(
onTap: clickedFav, //The inkwell doesn't seem to respond and update the UI
child: clicked ? Icon(
Icons.favorite,
color: Colors.red,
size: 15
) : Icon(
Icons.favorite_border,
color: Colors.white,
size: 15
)
)
],
),
)
],
),
),
),
),
),
Strangely enough, upon clicking the Inkwell widget, the value does get changed i.e If I click it and if the boolean value is false, it gets changed to true but doesn't change back to false. Also, as stated again, the UI doesn't update.
Your UI doesn't change because
StuffCards('https://static.toiimg.com/thumb/60892473.cms?imgsize=159129&width=800&height=800', false),
Will never change. When you call setstate in the StuffCards class, the widget gets a rebuild, but with the same parameters.
So you have two options here
you make a function in the OtherStuffState class that toggles the value, and you pass that function on to the StuffCards class, en you call that function when the ontap event occurs in the InkWell.
you use provider to store the data and you make a function in the modelclass to toggle the card, so you just have to call in the StuffCards class context.read<ModelClass>().toggleCard(cardNumber)
I have four containers and would like to make a quiz app. I need to change the container border color when selected. For example, when I select the right option only, the selected option color needs to change to green. When I select the wrong option, the wrong option needs to show as red, and at the same time the right answer also needs to show as green. I am struggling with how to make the code for changing the color. Help me the right way to do this. All I would like is changing the color of the container border when I tap.
SizedBox(height: 20),
Expanded(
child: Container(
margin: EdgeInsets.only(bottom: 10),
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
), //boxdecoration
child: Column(
children: [
SizedBox(height: 10),
Container(
margin: EdgeInsets.only(top: 10),
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(15),
), //decoration
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Answer 1', style: TextStyle(color: Colors.grey, fontSize: 16), //textStyle
), //text
Container(
height: 26,
width: 26,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
border: Border.all(color: Colors.grey),
), //boxdecoration
), //container
], //widget
), //row
), //container
Firstly the selected index will be null. also, we know the right answer index.
In order to archive that, we can include two variables inside state class.
int _rightAnswerIndex = 2;
int? tappedIndex;
On every answer pressed, we will assign the tappedIndex
setState(() {
tappedIndex = index;
});
},`
To control the color of the border, first we will check if the index is tapped or not,
if not tapped, just pass default color or null color, or just Colors.transparent
if tapped check the option is right answer or not then assign color
like
color: tappedIndex != null
? _rightAnswerIndex == index
? Colors.green
: Colors.red
: Colors.transparent,
),,
Full State class with Container
class _AnimTestState extends State<AnimTest> {
int _rightAnswerIndex = 2;
int? tappedIndex;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: [
...List.generate(
4,
(index) => Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () {
setState(() {
tappedIndex = index;
});
},
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: tappedIndex != null
? _rightAnswerIndex == index
? Colors.green
: Colors.red
: Colors.transparent,
),
),
child: Text("Answer $index"),
),
),
),
),
],
),
),
);
}
}
This is my first App and my first steps in programming. I started with designing the Homepage. Now I want the Containers to act like Buttons, so that I can navigate to other pages. I just can't figure out a way to do so. Maybe u guys got some ideas.
Do i have to delete the 5 Containers and add 5 buttons and redesign them?
I Think there might be a problem since I wrote the buttons as widget?
The Code so far:
//import 'dart:html';
import 'package:apptierpark/Anfahrt.dart';
import 'package:flutter/material.dart';
void main () => runApp(MaterialApp(home: Tierpark()));
class Tierpark extends StatelessWidget {
get assets => null;
get image => null;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(60.0),
child: AppBar(
title: Text('Tierpark Marzahne',
style: TextStyle (
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 45,
fontFamily: 'Amatic',
shadows: [
Shadow(
blurRadius: 10.0,
color: Colors.white,
offset: Offset(5.0, 5.0),
)
]
)),
flexibleSpace: Image(
image: AssetImage('images/urwald4.jpg'),
fit: BoxFit.fill,
),
backgroundColor: Colors.transparent,
),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage('images/bamboo.jpg'), fit: BoxFit.fill)),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children:
<Widget>[
MenuButton2('Bewohner',),
SizedBox(height: 50),
MenuButton2('Parkplan'),
SizedBox(height: 40),
MenuButton2('Zeiten & Preise'),
SizedBox(height: 40),
MenuButton2('Anfahrt'),
SizedBox(height: 40),
MenuButton2 ('Über Uns')
]
,)
,)
)
);
}
}
//Button Mainpage Neu
class MenuButton2 extends StatelessWidget {
final String title;
const MenuButton2(this.title);
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: const Color(0xFFa9d470),
border: Border.all(
color: const Color(0xFFa9d470)
),
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.9),
spreadRadius: 10,
blurRadius: 12
)
]
),
width: MediaQuery.of(context).size.height*0.38,
height: MediaQuery.of(context).size.height*0.11,
child: Align(
alignment: Alignment.center,
child: Text (title,
style: TextStyle(
fontSize: 50,
fontFamily: 'Amatic',
fontWeight: FontWeight.bold
),))
);
}
}
Wrap the Container with GestureDetector or InkWell like this and call functions with it's properties,
class MenuButton2 extends StatelessWidget {
final String title;
final int buttonId;
const MenuButton2(this.title,this.buttonId);
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
if(buttonId == 1){
// do 1
}
else if(buttonId == 2){
// do 2
}
else if(buttonId == 3){
// do 3
}
else if(buttonId == 4){
// do 4
}
else {
// do 5
}
},
child:Container(
decoration: BoxDecoration(
color: const Color(0xFFa9d470),
border: Border.all(
color: const Color(0xFFa9d470)
),
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.9),
spreadRadius: 10,
blurRadius: 12
)
]
),
width: MediaQuery.of(context).size.height*0.38,
height: MediaQuery.of(context).size.height*0.11,
child: Align(
alignment: Alignment.center,
child: Text (title,
style: TextStyle(
fontSize: 50,
fontFamily: 'Amatic',
fontWeight: FontWeight.bold
),
),
),
);
}
And in the place where you call the function do this,
...
<Widget>[
MenuButton2('Bewohner', 1),
SizedBox(height: 50),
MenuButton2('Parkplan', 2),
SizedBox(height: 40),
MenuButton2('Zeiten & Preise', 3),
SizedBox(height: 40),
MenuButton2('Anfahrt', 4),
SizedBox(height: 40),
MenuButton2 ('Über Uns', 5)
],
...
Add your Container inside Inkwell or GestureDetector Widgtes refer below code hope its help to you.
Inkwell Widget
GestureDetector Widgets
// GestureDetector( you use GestureDetector also here instead of InkWell Widgets
InkWell(
onTap: () {
print('button Pressed');
// Call your onPressed or onTap function here
},
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(
Radius.circular(30),
),
),
height: 50,
width: 200,
child: Text(
'Search',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
),
Your result screen ->
I am new in flutter. I have implemented a button and i want to progress indicator like below on click of the button.
I have already use percent indicator package to implement but it's not archive properly.
my code is,
class DownloadIndicatorWidget extends StatefulWidget {
bool download = false;
#override
_DownloadIndicatorWidgetState createState() => _DownloadIndicatorWidgetState();
}
class _DownloadIndicatorWidgetState extends State<DownloadIndicatorWidget> {
#override
Widget build(BuildContext context) {
return widget.download?ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
height: 40,
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff9F00C5), // <--- border color
width: 10.0,
),
borderRadius: BorderRadius.circular(10.0)
),
child: LinearPercentIndicator(
// width: MediaQuery.of(context).size.width -
// width:107,
animation: true,
lineHeight: 40.0,
animationDuration: 2500,
percent: 1,
center: Text(
"Downloading...",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w800,
fontSize: 14
)),
linearStrokeCap: LinearStrokeCap.roundAll,
progressColor: Color(0xff9F00C5),
backgroundColor: Colors.white,
),
),
):RaisedButton(
onPressed: () {
setState(() {
widget.download = true;
});
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
padding: EdgeInsets.all(0.0),
child: Ink(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [Color(0xff9F00C5), Color(0xff9405BD),Color(0xff7913A7),Color(0xff651E96), Color(0xff522887)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
borderRadius: BorderRadius.circular(10.0)
),
child: Container(
constraints: BoxConstraints(maxWidth: 300.0, minHeight: 50.0),
alignment: Alignment.center,
child: Text(
"Download",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w800,
fontSize: 18
),
),
),
),
);
}
}
So, how to implement properly to archive like image ? and if there is any other way to achieve it, please do suggest me i really need this.
Thanks in advance!
This code may help you.
import 'dart:async';
import 'package:flutter/material.dart';
class Progress extends StatefulWidget {
#override
_ProgressState createState() => _ProgressState();
}
class _ProgressState extends State<Progress> {
double progress = 0;
void initState() {
super.initState();
Timer.periodic(Duration(milliseconds: 100), (Timer t) {
setState(() {
if (progress > 120) {
progress = 0;
} else {
progress += 5;
}
});
});
}
#override
Widget build(BuildContext context) {
return Center(
child: FlatButton(
onPressed: () {},
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
height: 45,
width: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: Colors.indigo,
width: 1,
)),
child: Stack(
children: <Widget>[
AnimatedContainer(
color: Colors.indigo,
width: progress,
duration: Duration(milliseconds: 100),
curve: Curves.fastOutSlowIn,
),
Center(child: Text("Downloading...")),
],
))),
),
);
}
}
I am trying to use FadeTransition to fade in a picture and some text after pressing a button. So far this is working fine, however, on subsequent presses of the button I want a new picture and text to Fade in. Right now the first picture and text fades in, but subsequent ones do not.
Here is my code so far:
import 'package:flutter/material.dart';
class SurpriseReveal extends StatefulWidget {
final Widget child;
final int surpriseNumber;
final List<Map<String, String>> surprises;
final Function randomSurprise;
SurpriseReveal(
{#required this.surpriseNumber,
#required this.surprises,
#required this.randomSurprise,
#required this.child});
#override
_SurpriseRevealState createState() => _SurpriseRevealState();
}
class _SurpriseRevealState extends State<SurpriseReveal> with SingleTickerProviderStateMixin{
AnimationController _controller;
Animation _animation;
#override
void initState() {
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2),
);
_animation = Tween(
begin: 0.0,
end: 1.0,
).animate(_controller);
}
#override
dispose(){
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
_controller.forward();
return Container(
child: Stack(
children: <Widget>[
Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.share),
splashColor: Colors.pink[900],
backgroundColor: Colors.pink[300],
onPressed: () {},
),
),
Positioned(
bottom: 300,
top: 40,
right: 40,
left: 40,
child: FadeTransition(
opacity: _animation,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.pink[300],
width: 4,
),
borderRadius: BorderRadius.circular(300),
),
child: Padding(
padding: const EdgeInsets.all(40.0),
child: Text(
widget.surprises[widget.surpriseNumber]['Surprises'],
style: TextStyle(fontSize: 20, color: Colors.pink[700]),
),
),
alignment: Alignment.topCenter,
),
),
),
Positioned(
bottom: 380,
top: 120,
right: 70,
left: 70,
child: FadeTransition(
opacity: _animation,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: new AssetImage(
widget.surprises[widget.surpriseNumber]['Image'] ),
fit: BoxFit.fill,
),
border: Border.all(
color: Colors.pink[300],
width: 2,
),
borderRadius: BorderRadius.circular(12),
),
//child: Image.asset(surprises[surpriseNumber]['Image']),
),
),
),
Positioned(
bottom: -60,
top: 400,
right: 120,
left: 120,
child: FloatingActionButton(
onPressed: widget.randomSurprise,
splashColor: Colors.pink[900],
backgroundColor: Colors.pink[300],
child: Container(
// decoration property gives it a color and makes it round like a floating action button
// add your desired padding here
// add the child element
child: Center(
child: Text(
'Surprise me again!',
// style of the text
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 22.0,
color: Colors.pink[900],
),
),
),
),
),
),
],
overflow: Overflow.visible,
),
);
}
}
I would assume I need my FAB that triggers a new picture and text to also trigger the animation again, but I am unsure how to do this?
Try this:
FloatingActionButton(
onPressed: {widget.randomSurprise; _controller.reset();},
......
If you want your animation controller to play the animation again, you need to reset it.