Flutter : Use function from another file in widget - flutter

I'm using flutter and i'm completely a newbie with this framework. I'm trying to use the visibility widget to show and hide a Row.
I'm trying to use this widget when I declare the variable bool _isVisible = false in a stateful or stateless widget, but I have a problem when I want to show and hide the row() through a widget from another dart file. I don't know how to do it. To solve this problem i'm trying to create a dart file for create a function and variable bool _isVisible = false; so that all widgets can access but I am unable to use the bool variable and the function of this dart file in my widgets.
in this picture: ontap in the green circle i want the pink color all the row() with the rating and the button to be hidden.
A screenshot of the issue from my application
P.S: sorry for my english
This is the widget( AnimeMovieDialog ) with the rating section that i want to be hidden (or show) when user tap on the CardAnimeMovie widget.
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Tutorial by Woolha.com',
home: AnimeMovieDialog(),
debugShowCheckedModeBanner: false,
);
}
}
class AnimeMovieDialog extends StatefulWidget {
#override
_AnimeMovieDialogState createState() => _AnimeMovieDialogState();
}
class _AnimeMovieDialogState extends State<AnimeMovieDialog> {
double _rating = 1;
double count = 1;
bool _isVisible = true;
void _change() {
setState(() {
_isVisible = !_isVisible;
print("tap succes");
});
}
void _close() {
setState(() {
_isVisible = false;
});
}
#override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return SafeArea(
child: Visibility(
visible: _isVisible,
child: Stack(children: [
Container(
width: width,
height: height,
decoration: BoxDecoration(color: Color(0xffffff).withOpacity(0.6)),
),
Center(
child: SingleChildScrollView(
child: Container(
width: width / 1.05,
height: height / 1.2,
decoration: BoxDecoration(color: Color(0xff212529)),
child: Column(
children: [
Row(
children: [
Container(
width: width / 1.05,
height: 60,
decoration: BoxDecoration(color: Color(0xff212529)),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding:
const EdgeInsets.fromLTRB(4.0, 5, 35, 0),
child: GestureDetector(
onTap: () {
_close();
},
child: Container(
width: 65,
height: 45,
color: Colors.blue,
child: Icon(Icons.clear,
color: Colors.white)),
),
),
Container(
width: width / 2,
height: height / 2,
child: TextField(
cursorColor: Colors.orange,
style: TextStyle(
color: Colors.white,
),
maxLines: 1,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.white)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.orange)),
border: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.white)),
hintText: 'Rechercher',
hintStyle:
TextStyle(color: Colors.white),
)),
),
Padding(
padding:
const EdgeInsets.fromLTRB(15, 0, 8, 0),
child: Container(
child: Icon(Icons.search,
color: Colors.white)),
)
],
),
)
],
),
Row(
children: [
Container(
width: width / 1.05,
height: height / 1.5,
child: ListView(
children: [
CardAnimeMovie(),
CardAnimeMovie(),
CardAnimeMovie(),
CardAnimeMovie(),
CardAnimeMovie(),
CardAnimeMovie()
],
),
)
],
),
Row(children: [
Column(
children: [
Container(
width: width / 2,
height: height / 11.25,
color: null,
child: Row(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(
25, 0, 0, 0),
child: GFRating(
onChanged: (value) {
setState(() {
_rating = value;
});
},
value: _rating,
size: 25,
color: Colors.orange,
borderColor: Colors.orange,
),
)
],
)),
],
),
Padding(
padding: const EdgeInsets.fromLTRB(35, 0, 8, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: width / 3,
height: height / 18,
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25.0),
topRight: Radius.circular(25.0),
bottomLeft: Radius.circular(25.0),
bottomRight: Radius.circular(25.0))),
child: TextButton(
style: TextButton.styleFrom(
primary: Colors.blue,
onSurface: Colors.red,
),
onPressed: null,
child: Text('Noter',
style: TextStyle(
color: Colors.white,
fontFamily: 'DBIcons',
fontSize: 17)),
),
),
],
),
)
])
],
)),
),
),
]),
),
);
}
}
This is the movie resume (green in the picture)
class CardAnimeMovie extends StatefulWidget {
#override
_CardAnimeMovieState createState() => _CardAnimeMovieState();
}
class _CardAnimeMovieState extends State<CardAnimeMovie> {
// bool _visible = false;
// void ratechange() {
// setState(() {
// _visible = !_visible;
// });
// }
#override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return Padding(
padding: const EdgeInsets.all(2.0),
child: GestureDetector(
onTap: () {
ratechange();
},
child: Container(
width: width / 5,
height: height / 3.2,
decoration: BoxDecoration(color: Color(0xff272824)),
child: Row(
children: [
Column(children: [
Container(
width: width / 2.1,
height: height / 3.2,
child: Image.network(
'https://image.noelshack.com/fichiers/2014/31/1406628082-btlbdfqiyaasamj.jpg',
fit: BoxFit.cover,
),
)
]),
Column(children: [
Container(
width: width / 2.15,
height: height / 3.2,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.white, width: 0.5),
),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(15, 5, 0, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
Text(
'Titre : oeuvre',
style: TextStyle(
color: Colors.white,
fontFamily: 'DBIcons',
fontSize: 18,
),
)
],
),
SizedBox(
height: 0.5,
),
Row(
children: [
Text(
'Auteur : XXXX',
style: TextStyle(
color: Colors.white,
fontFamily: 'DBIcons',
fontSize: 18,
),
)
],
),
SizedBox(height: 7),
Row(
children: [
Container(
width: width / 2.5,
height: height / 5,
child: Text(
"Résume : Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,",
style: TextStyle(
color: Colors.white,
fontFamily: 'DBIcons',
fontSize: 18,
),
),
)
],
)
],
),
),
)
])
],
)),
),
);
}
}

You can give function to another dart file and with this you can invoke function in another dart file.
For example:
class AnotherWidget extends StatelessWidget{
final Function myFunction;
AnotherWidget ({this.myFunction});
#override
Widget build(BuildContext context) {
return FlatButton(onPressed: myFunction,....);
}

Related

Pass a parameters to stateful class

How can I pass a parameters to a stateful class in flutter?
I couldn't pass a parameter in the class as I'm a beginner and don't know the method.
I want to pass data from a list to build the class x times, and display the data in a container.
The text I want to pass is labeled tH.
I hope if someone can pass the argument for me.
My class:
class Thkr extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _ThkrState();
}
}
class _ThkrState extends State<Thkr> {
int Thkr_count = 3;
void _incrementCounter() {
setState(() {
Thkr_count--;
});
}
#override
Widget build(BuildContext) {
return (Column(children: [
Container(
padding: EdgeInsets.all(35),
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 3),
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: Colors.lightGreen,
offset: Offset(6.0, 6.0),
),
],
),
child: Text({here I want to pass the data},
style: TextStyle(fontSize: textSize, color: themeli[themei])),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Card(
child: SizedBox(
width: 100,
height: 30,
child: Center(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.lightGreen,
minimumSize: Size.fromHeight(40), //
),
onPressed: () {
_incrementCounter();
},
child: Text(
'Count',
style: TextStyle(color: themeli[themei]),
),
)),
),
),
Card(
child: SizedBox(
width: 100,
height: 30,
child: Center(
child: Text("$Thkr_count left",
style: TextStyle(
backgroundColor: Colors.white12,
))),
),
),
],
)
]));
}
}

dynamic progress bar in flutter

I want to create a progress bar in flutter which is like this
I get the data of week from backend but I have to create it this way.
and the icon on weeks or survey should be touchable.
thanks in advance.
Still a lot of things to change, but i thing it should be enough for the beginning
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
#override
Widget build(BuildContext context) {
List<String> points = [
'Survey',
'Week 1',
'Week 2',
'Week 3',
'Week 4',
];
var lineWidth =
MediaQuery.of(context).size.width - 16.0; // screen width - 2 * padding
var space = lineWidth / points.length; //space between dots
var currentSteps = 3; // <---- change this one
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: SizedBox(
height: 60.0,
child: Stack(
children: [
//grey line
Positioned(
top: 15,
left: 0,
right: 0,
child: Container(
height: 2.0,
width: double.infinity,
color: Colors.grey,
),
),
//red line
Positioned(
top: 15,
left: 0,
child: Container(
height: 2.0,
width: space * (currentSteps - 1) + space / 2,
color: Colors.orange,
),
),
//circles
Row(
children: points
.asMap()
.map((i, point) => MapEntry(
i,
SizedBox(
width: space,
child: Column(
children: [
Stack(
children: [
Container(
height: 30.0,
width: 30.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
width: 1.5,
color: i == currentSteps - 1
? Colors.orange
: Colors.transparent,
),
),
child: Center(
child: Container(
height: 20.0,
width: 20.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: i < currentSteps
? Colors.orange
: Colors.grey,
),
),
),
),
if (i < currentSteps - 1)
const SizedBox(
height: 30.0,
width: 30.0,
child: Center(
child: Icon(
Icons.check,
size: 16.0,
color: Colors.white,
),
),
),
],
),
const SizedBox(height: 4.0),
Text(
point,
textAlign: TextAlign.left,
style: TextStyle(
color: i < currentSteps
? Colors.orange
: Colors.grey,
),
),
],
),
),
))
.values
.toList(),
),
],
),
),
),
),
);
}
}
You can try basic Stepper widget with type: StepperType.horizontal. As for the UI you like im_stepper package. If it fails to satisfy you can create custom widget with Stack and Row.
Try basic Stepper widget of flutter. if its not working properly then you need to create custom widget.

Flutter - How can I make these Containers to work like a Button?

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 ->

Buttons center their children when they are placed in a ListView.builder widget

Why do buttons in Flutter tend to align their children to the centre when they are placed in list views?
For example:
import 'package:flutter/material.dart';
class Test extends StatefulWidget {
#override
_TestState createState() => _TestState();
}
class _TestState extends State<Test> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
itemCount: 10,
itemBuilder: (context, index){
return MaterialButton(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Hello"),
],
));
}
),
);
}
}
This would result in ten hellos spaced evenly by the default height of the button, but they would be centered; even though I used the CrossAxisAlignment.start property in a column.
Here is the image:
But when I replace the MaterialButton with a Container they are aligned to the start to the column as wanted.
When I just remove the ListView.Builder I get 'hello' aligned to the start.
The same thing happens with the rest of the buttons.
Is there a way to make buttons in list views not have centered children inside them?
Edit: the example was fixed by #Harry but it didn't fix my exact code
here is my code: I try to created a list of widgets outside and use a function to add my list items into that list and return a list view through the ActivitiesList widget
import 'package:flutter/material.dart';
import 'package:list_them_out/models/activities.dart';
import 'package:provider/provider.dart';
class ActivitiesList extends StatefulWidget {
#override
_ActivitiesListState createState() => _ActivitiesListState();
}
double conBorderRadius = 30;
class _ActivitiesListState extends State<ActivitiesList> {
List<Widget> itemData = [];
void getData(context) {
double cardHeight = MediaQuery.of(context).size.height * 0.3;
double cardWidth = MediaQuery.of(context).size.width * 0.97;
final activities = Provider.of<List<Activity>>(context);
activities == null
// ignore: unnecessary_statements
? null
: setState(() {
itemData = [];
});
activities == null
// ignore: unnecessary_statements
? null
: setState(() {
activities.forEach((element) {
itemData.add(Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Container(
width: cardWidth,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(conBorderRadius),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: <Color>[
Colors.lightGreen[300],
Colors.lightBlue[300],
]
),
boxShadow: [
BoxShadow(
color: Colors.grey[600],
offset: Offset(4.0, 4.0),
blurRadius: 15,
spreadRadius: 1),
BoxShadow(
color: Colors.white,
offset: Offset(-4.0, -4.0),
blurRadius: 15,
spreadRadius: 1),
]),
child: Stack(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(conBorderRadius),
child: MaterialButton(
splashColor: HSLColor.fromColor(Colors.green).toColor(),
onPressed: () {},
child: Align(
alignment: Alignment.centerLeft,
child: Container(
child: Padding(
padding: EdgeInsets.only(top: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: cardWidth * 0.61,
child: Text(
element.name,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.grey[600],
fontSize: 25,
fontWeight: FontWeight.w500,
letterSpacing: 1,
),
),
),
Padding(
padding: EdgeInsets.only(top: cardHeight * 0.09, left: cardWidth * 0.03),
child: Container(
width: cardWidth * 0.48,
child: RichText(
maxLines: 2,
overflow: TextOverflow.ellipsis,
text: TextSpan(children: [
TextSpan(
text: "Start: ",
style: TextStyle(
color: Colors.grey[800],
fontSize: 20,
fontWeight: FontWeight.w400,
letterSpacing: 1),
),
TextSpan(
text: element.time,
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.w300,
fontSize: 20,
))
]),
),
),
),
SizedBox(height: cardHeight * 0.06,),
Row(
children: [
IconButton(icon: Icon(Icons.comment),
onPressed: () => null,
color: Colors.grey[600],
),
Padding(
padding: EdgeInsets.only(bottom: 5),
child: Text("Comments", style: TextStyle(color: Colors.grey[600], fontSize: 20, fontWeight: FontWeight.w300, letterSpacing: 1),),
)
],
)
],
),
),),
),
),
),
Positioned(
right: 0,
bottom: 0,
top: 0,
child: ClipPath(
clipper: MyClip(radius: conBorderRadius),
child: Container(
height: cardHeight,
width: cardWidth * 0.45,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: <Color>[
Colors.grey[300],
Colors.lightBlue[100].withOpacity(0.5)
])),
),
),
),
Positioned(
right: cardWidth * 0.05,
bottom: 20,
child: Container(
child: Text("Hello"),
),
)
],
)),
));
});
});
}
#override
Widget build(BuildContext context) {
double listHeight = MediaQuery.of(context).size.height * 0.86;
double listWidth = MediaQuery.of(context).size.width * 0.97;
getData(context);
return ClipRRect(
borderRadius: BorderRadius.only(
topRight: Radius.circular(50), topLeft: Radius.circular(50)),
child: Container(
height: listHeight,
width: listWidth,
child: ListView.builder(
itemCount: itemData.length,
itemBuilder: (context, index) {
return Padding(
padding: EdgeInsets.only(bottom: 30),
child: itemData[index],
);
}),
));
}
}
``
Try using the Align widget. Just wrap the column with an align widget and have the alignment parameter be alignment.centerLeft.
import 'package:flutter/material.dart';
class Test extends StatefulWidget {
#override
_TestState createState() => _TestState();
}
class _TestState extends State<Test> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
itemCount: 10,
itemBuilder: (context, index){
return MaterialButton(
child: Align(
child:Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Hello"),
],
),
alignment: Alignment.centerLeft,
)
);
}
),
);
}
}

trying to add to bag and to update prices and cups

I am trying to do this test TODOs: but i have been have issuses pls help: i am trying to Uncomment the _confirmOrderModalBottomSheet() method to show summary of order, Uncomment the setState() function to clear the price and cups, and Change the 'price' to 0 when this button is clicked Increment the _cupsCounter when 'Add to Bag' button is clicked, and to Call setState((){}) method to update both price and cups counter when 'Add to Bag' button is clicked
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Coffee Test',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primaryColor: Colors.white,
),
home: MyHomePage(title: 'Coffee Test'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _selectedPosition = -1;
String _coffeePrice ="0";
int _cupsCounter =0;
int price = 0;
String _currency ="₦";
static const String coffeeCup ="images/coffee_cup_size.png";
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
title: FlatButton(
onPressed: (){
//TODO: Uncomment the _confirmOrderModalBottomSheet() method to show summary of order
//_confirmOrderModalBottomSheet(totalPrice: "$_currency$price", numOfCups: "x $_cupsCounter");
},
child: Text("Buy Now",style: TextStyle(color: Colors.black87),),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(18.0), side: BorderSide(color: Colors.blue))
),
actions: [
InkWell(
onTap: () {
//TODO: Uncomment the setState() function to clear the price and cups
//TODO: Change the 'price' to 0 when this button is clicked
setState(() {
this.price = -1;
this._cupsCounter = 0;
});
Icon(Icons.clear);
}),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Container(
height: double.maxFinite,
alignment: Alignment.center,
child: Text("$_cupsCounter Cups = $_currency$price.00", style: TextStyle(fontSize: 18),),
),
)
],
),
body: Padding(padding: EdgeInsets.all(20), child: _mainBody(),) // This trailing comma makes auto-formatting nicer for build methods.
);
}
Widget _mainBody(){
return SingleChildScrollView(
child: Container(
height: double.maxFinite,
width: double.maxFinite,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 0,
child: Stack(
children: [
Container(
width: double.maxFinite,
height: 250,
margin: EdgeInsets.only(left: 50, right: 50, bottom: 50, top: 60),
decoration: BoxDecoration(borderRadius:
BorderRadius.all(Radius.circular(180)),
color: Color.fromRGBO(239, 235, 233, 100)),
),
Container(
alignment: Alignment.center,
width: double.maxFinite,
height: 350,
child: Image.asset("images/cup_of_coffee.png", height: 300,),
)
],
)),
Padding(padding: EdgeInsets.all(10),),
Expanded(flex: 0,child: Text("Caffè Americano",
style: TextStyle(fontWeight: FontWeight.bold,
fontSize: 30),)),
Padding(padding: EdgeInsets.all(6),),
Expanded(flex: 0, child: Text("Select the cup size you want and we will deliver it to you in less than 48hours",
style: TextStyle(fontWeight: FontWeight.bold,
fontSize: 14, color: Colors.black45,),
textAlign: TextAlign.start,),
),
Container(
margin: EdgeInsets.only(top: 30, left: 20),
height: 55,
width: double.maxFinite,
alignment: Alignment.center,
child:Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
RichText(text: TextSpan(
text: _currency,
style: TextStyle(fontWeight: FontWeight.bold,
fontSize: 25, color: Colors.black87),
children: [
TextSpan(text: _coffeePrice, style: TextStyle(fontSize: 50, fontWeight: FontWeight.bold))
]
),),
Padding(
padding: EdgeInsets.only(right: 15),
),
ListView.builder(itemBuilder: (context, index){
return InkWell(
child: _coffeeSizeButton(_selectedPosition == index,
index ==0? "S" : index ==1? "M": "L"),
onTap: (){
setState(() {
this._coffeePrice= index ==0? "300" : index ==1? "600": "900";
_selectedPosition = index;
});
},
);
}, scrollDirection: Axis.horizontal,
itemCount: 3, shrinkWrap: true,),
],),
),
Container(
margin: EdgeInsets.only(top: 30),
padding: EdgeInsets.all(10),
width: double.maxFinite,
height: 70,
child: FlatButton(onPressed: (){
//TODO: Currently _cupsCounter only show 1 when this button is clicked.
// TODO: Increment the _cupsCounter when 'Add to Bag' button is clicked'
//TODO: Call setState((){}) method to update both price and cups counter when 'Add to Bag' button is clicked
this._cupsCounter = 1;
this.price += int.parse(_coffeePrice);
}, child: Center(child: Text("Add to Bag",
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),)
,),
color: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50)
),
),
)
],
),
),
);
}
Widget _coffeeSizeButton(bool isSelected, String coffeeSize){
return Stack(
children: [
Container(alignment: Alignment.center, width: 55,
child: Text(coffeeSize, style: TextStyle(fontSize: 10, fontWeight: FontWeight.bold,
color: isSelected? Colors.blue: Colors.black45),),),
new Container(
margin: EdgeInsets.only(right: 10),
child: Image.asset(coffeeCup, width:50, color: isSelected ? Colors.blue: Colors.black45,),
decoration: BoxDecoration(border: Border(top: BorderSide(color: isSelected? Colors.blue: Colors.black45,
width: isSelected? 2: 1), left: BorderSide(color: isSelected? Colors.blue: Colors.black45,
width: isSelected? 2: 1), bottom: BorderSide(color: isSelected? Colors.blue: Colors.black45,
width: isSelected? 2: 1), right: BorderSide(color: isSelected ?Colors.blue: Colors.black45 ,
width: isSelected? 2: 1)), borderRadius: BorderRadius.all(Radius.circular(5))),
)
],
);
}
void _confirmOrderModalBottomSheet({String totalPrice, String numOfCups}){
showModalBottomSheet(
context: context,
builder: (builder){
return new Container(
height: 150.0,
color: Colors.transparent, //could change this to Color(0xFF737373),
//so you don't have to change MaterialApp canvasColor
child: new Container(
padding: EdgeInsets.all(10),
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(10.0),
topRight: const Radius.circular(10.0))),
child: Column(
children: [
Container(
child: Text("Confirm Order",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),),
alignment: Alignment.center, height: 30, decoration: BoxDecoration(
), ),
_getEstimate(totalPrice, numOfCups)
],
)),
);
}
);
}
Widget _getEstimate(String totalPrice, String numOfCups){
return Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Image.asset("images/cup_of_coffee.png", height: 70, width: 50,),
Padding(padding: EdgeInsets.all(10)),
Text(numOfCups, style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),),
Padding(padding: EdgeInsets.all(10)),
Text(totalPrice, style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),)
],
);
}
}
You're setting 1 to your _cupsCounter instead of adding one to it.
When updating your values, putting the operation i.e _cupsCounter += 1; in setState will update the state of your widget which makes values change in your widgets.
setState((){
_cupsCounter += 1; // make it +=1 instead of =1.
price += int.parse(_coffeePrice);
});
Also you can use setState by putting it after your operation which will update the state of your widget after the operation is done.
_cupsCounter += 1; // make it +=1 instead of =1.
price += int.parse(_coffeePrice);
setState((){});
Full code should look like this.
Container(
margin: EdgeInsets.only(top: 30),
padding: EdgeInsets.all(10),
width: double.maxFinite,
height: 70,
child: FlatButton(onPressed: (){
// Currently _cupsCounter only show 1 when this button is clicked.
// Increment the _cupsCounter when 'Add to Bag' button is clicked'
// Call setState((){}) method to update both price and cups counter when 'Add to Bag' button is clicked
setState((){
_cupsCounter += 1; // make it +=1 instead of =1.
price += int.parse(_coffeePrice);
}); // call setState like this
}, child: Center(child: Text("Add to Bag",
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),)
,),
color: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50)
),
),
)