How to use CupertinoTimerPicker in AlertDialog - flutter

When I use CupertinoTimerPicker in AlertDialog I'm Getting LayoutBuilder Error.
How can I use CupertinoTimerPicker in AlertDialog?
This is my code:
showDialog(
context: context,
builder: (context) {
return AlertDialog(
content: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
height: 300,
child: CupertinoTimerPicker(
onTimerDurationChanged: (value) {}
),
)
],
));
},
);
Error Message
throw FlutterError(
'LayoutBuilder does not support returning intrinsic dimensions.\n'
'Calculating the intrinsic dimensions would require running the layout '
'callback speculatively, which might mutate the live render object tree.',
);

You can use like this and also the output in image below
Duration selectedValue;
Container(
margin: EdgeInsets.all(40),
width: double.infinity,
height: MediaQuery.of(context).size.height*0.1,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CupertinoButton(
child: Text("Show Picker"),
onPressed: (){
showTimerPicker();
},
),
Material(
child: Text(
"$selectedValue",
style: TextStyle(
fontSize: 18
),
),
),
]
),
),
void showTimerPicker() {
showCupertinoModalPopup(
context: context,
builder: (BuildContext builder) {
return Container(
height: MediaQuery.of(context).copyWith().size.height * 0.25,
width: double.infinity,
color: Colors.white,
child: CupertinoTimerPicker(
initialTimerDuration: Duration(hours:0, minutes: 0, seconds: 0),
onTimerDurationChanged: (value) {
selectedValue = value;
setState(() {});
},
)
);
}
);
}
Output:

Use this method where you have a button and click on it
void showTimerPicker() {
showCupertinoModalPopup(
context: context,
builder: (BuildContext builder) {
return Container(
height: MediaQuery
.of(context)
.copyWith()
.size
.height * 0.25,
width: double.infinity,
color: Colors.white,
child: CupertinoTimerPicker(
initialTimerDuration: Duration(hours:0, minutes: 0, seconds: 0);
onTimerDurationChanged: (value) {
selectedValue = value;
setState(() {
});
},
)
);
}
);
}

Related

How to switch images in the list?

I am getting a list with images. I receive several images, when I click on the image, the _showImageDialog method works for me and an image with buttons for scrolling is displayed (I attached a screenshot below). station.photos![index]. How can I switch to the next image when I click on the button? I tried to change the index but it didn't work for me why?
void _showImageDialog(
BuildContext context, PublicChargingStationModel station) {
int index = 0;
showGeneralDialog(
context: context,
pageBuilder: (context, Animation<double> animation,
Animation<double> secondaryAnimation) {
return SafeArea(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 15),
color: Colors.black.withOpacity(0.6),
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Align(
alignment: Alignment.topRight,
child: GestureDetector(
onTap: () => Navigator.pop(context),
child: SvgPicture.asset(
constants.Assets.closeBold,
color: constants.Colors.greyLight,
height: 26,
),
),
),
),
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () {},
child: SvgPicture.asset(
constants.Assets.arrowLeft,
color: constants.Colors.greyLight,
height: 48,
),
),
const SizedBox(width: 20),
SizedBox(
width: MediaQuery.of(context).size.width / 1.6,
height: MediaQuery.of(context).size.width / 1.1,
child: station.photos!.isNotEmpty
? CachedNetworkImage(
imageUrl: station.photos![index].url,
imageBuilder: (context, imageProvider) =>
Container(
// width: MediaQuery.of(context).size.width / 1.6,
height: 116,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover,
),
),
),
placeholder: (context, url) => Center(
child: Container(
// width: MediaQuery.of(context).size.width / 1.6,
height: 116,
alignment: Alignment.center,
child: const CircularProgressIndicator(
color: constants.Colors.purpleMain,
),
),
),
errorWidget: (context, url, error) => const Icon(
Icons.error,
color: constants.Colors.purpleMain,
),
)
: Image.asset(
constants.Assets.publicStation,
fit: BoxFit.cover,
),
),
const SizedBox(width: 20),
GestureDetector(
onTap: () {
if (index < station.photos!.length) {
setState(() {
index++;
});
station.photos![index].url;
}
},
child: SvgPicture.asset(
constants.Assets.arrowRight,
color: constants.Colors.greyLight,
height: 48,
),
),
],
),
],
),
),
);
},
);
}
i am also facing same issue in mobile development then i know we have to rebuild the whole dialog and then it will work well
Reference for solve this same
int selectedRadio = 0; // Declare your variable outside the builder
return AlertDialog(
content: StatefulBuilder( // You need this, notice the parameters below:
builder: (BuildContext context, StateSetter setState) {
return Column( // Then, the content of your dialog.
mainAxisSize: MainAxisSize.min,
children: List<Widget>.generate(4, (int index) {
return Radio<int>(
value: index,
groupValue: selectedRadio,
onChanged: (int value) {
// Whenever you need, call setState on your variable
setState(() => selectedRadio = value);
},
);
}),
);
},
),
);
When you call setState then it call the build method and a dialog is not a part of this context.so the simple solution is **wrap your dialog with statefulbuilder widget and then you will get a setstate method for dialog. **
You can checkout this video for solution
https://www.google.com/search?q=setstate+in+dialog+johannes+milki&oq=setstate+in+dialog+johannes+milki&aqs=chrome..69i57j33i160l5.11920j0j7&client=ms-android-samsung&sourceid=chrome-mobile&ie=UTF-8#

Gesture detector on tap not working in flutter release app but working in debug app

I am using firestore and created 4 cards on which the user taps on goes to the next screen. Everything is working fine in debug mode, in debug mode both Inkwell and Gesture Detector are working but when I make a release version I don't know why but both Inkwell and Gesture Detector are not working. Have no idea what's causing this. Please help.
class _RestaurantDashboardState extends State<RestaurantDashboard> {
Widget buildRestaurantCards(String title, IconData iconData, int orderCount) {
return Expanded(
child: GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
if (title == "Menu\nManagement") {
Navigator.push(context,
MaterialPageRoute(builder: (context) => MenuManagement()));
} else if (title == "Current Orders") {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => OrderScreen("In Progress"),
),
);
} else if (title == "Order History") {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => OrderHistory("In Progress"),
),
);
} else if (title == "Update Profile") {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
RestaurantSignUp(Utils.restaurant!.restaurantId, true),
),
);
}
},
child: Container(
height: double.infinity,
child: Card(
margin: EdgeInsets.all(8),
elevation: 8,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
margin: EdgeInsets.only(top: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
orderCount > 0
? Row(
children: [
Container(
alignment: Alignment.center,
width: 30,
height: 30,
margin: EdgeInsets.all(4),
padding: EdgeInsets.all(4),
child: FittedBox(
child: Text(
orderCount.toString(),
style: TextStyle(
color: Colors.white, fontSize: 18),
)),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(16),
),
)
],
)
: SizedBox(),
Container(
margin: EdgeInsets.symmetric(horizontal: 16),
alignment: Alignment.centerRight,
child: Icon(
iconData,
size: 40,
),
),
],
),
),
Container(
width: double.infinity,
margin:
EdgeInsets.symmetric(horizontal: 16, vertical: 16),
alignment: Alignment.center,
child: FittedBox(
child: Text(
title,
style: TextStyle(
fontSize: 20, fontWeight: FontWeight.w600),
textAlign: TextAlign.center,
),
)),
],
)),
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Dashboard'),
),
body: Container(
child: Column(
children: [
Container(
height: MediaQuery.of(context).size.height * 0.25,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
isFirebaseInitialized
? StreamBuilder(
stream: FirebaseFirestore.instance
.collection("orders")
.snapshots(),
builder: (context,
AsyncSnapshot<
QuerySnapshot<Map<String, dynamic>>>
snapshot) {
if (!snapshot.hasData) {
setState(() {
_isLoading = false;
});
return Container();
}
if (snapshot.hasError) {
setState(() {
_isLoading = false;
});
}
List<DocumentSnapshot> itemsList = [];
for (DocumentSnapshot doc
in snapshot.data!.docs) {
if (doc['restaurantId'] ==
Utils.restaurant!.restaurantId &&
doc['orderStatus'] == "In Progress") {
itemsList.add(doc);
}
}
return buildRestaurantCards("Current Orders",
Icons.list_alt, itemsList.length);
},
)
: buildRestaurantCards(
"Current Orders", Icons.list_alt, 0),
buildRestaurantCards("Order History", Icons.history, 0),
],
),
),
Container(
height: MediaQuery.of(context).size.height * 0.25,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
buildRestaurantCards(
"Menu\nManagement", Icons.restaurant_menu_rounded, 0),
buildRestaurantCards("Update Profile", Icons.person, 0),
],
),
),
],
),
)
);
}
}
Check if there are any exceptions caught in the debug console, If there are then fix those, then the issue will be resolved

How to get an image above background while shadowing background in flutter

I have an image and I want it to appear on my screen, above my background, with keeping background a bit dark type like in the image. I am thinking on using AlertDialog to display the image, but if you think there is a better way of doing it or a specific widget for this, please do tell me. Also please tell me what do we name this kind of image which hovers over background and focusing itself in UI.
enter code here
Just for trying out, I used this in my screen's initstate, as I want it to appear as soon as my screen appears -
super.initState();
showDialog(
context: context,
builder: (BuildContext buildContext) {
return AlertDialog(
content: Center(
child: Container(
color: Colors.red,
width: 200,
height: 200,
),
),
);
}
);
initState doesn't contain context you can get context after first frame.
You can use addPostFrameCallback
WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
showDialog(..);}
Or Future.delayed
Future.delayed(Duration.zero).then((value) {
showDialog(..); }
The dialog construction is :
showDialog(
context: context,
builder: (BuildContext buildContext) {
const double iconSize = 48;
return LayoutBuilder(
builder: (context, constraints) => AlertDialog(
backgroundColor: Colors.transparent,
elevation: 0,
contentPadding: EdgeInsets.zero,
content: SizedBox(
width: constraints.maxWidth * .75,
height: constraints.maxHeight * .75,
child: Stack(
children: [
///background image with fit Cover
Align(
alignment: Alignment.center,
child: Container(
width: constraints.maxWidth * .75 - iconSize,
height: constraints.maxHeight * .75 - iconSize,
color: Colors.cyanAccent,
),
),
Align(
alignment: Alignment.topRight,
child: GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Container(
decoration: const BoxDecoration(
color: Colors.white, shape: BoxShape.circle),
child: const Icon(
Icons.close,
size: iconSize,
),
),
),
)
],
),
),
),
);
},
);
You can use Stack widget withe three widget as children.
first children widget is your background screen.
second children widget is a Container widget with color .withOpacity().
third children widget is the image you are trying to show on top.
Like this:
return Scaffold(
body: Stack(
children: [
Container(
color: Colors.white,
),
Container(
color: Colors.black.withOpacity(0.5),
),
Center(
child: Container(
height: MediaQuery.of(context).size.height * 70 / 100,
width: MediaQuery.of(context).size.width * 80 / 100,
color: Colors.purple,
),
),
],
),
);
for Visibility issue you can use this.
bool isVisible = false;
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Stack(
children: [
Container(
color: Colors.red,
child: Center(
child: Container(
child: TextButton(
onPressed: () {
setState(() {
isVisible = true;
});
},
child: Text('Show Widget'),
),
),
),
),
Visibility(
visible: isVisible,
child: GestureDetector(
onTap: () {
setState(() {
isVisible = false;
});
},
child: Container(
color: Colors.white.withOpacity(0.5),
),
),
),
Visibility(
visible: isVisible,
child: Center(
child: Container(
height: MediaQuery.of(context).size.height * 70 / 100,
width: MediaQuery.of(context).size.width * 80 / 100,
color: Colors.purple,
child: Stack(
children: [
Positioned(
top: 0.0,
right: 0.0,
child: IconButton(
icon: const Icon(
Icons.close,
color: Colors.white,
),
onPressed: () {
setState(() {
isVisible = false;
});
},
),
),
],
),
),
),
),
],
),
);
}

how update video while taping on flip button and rotate button in flutter?

//#dart=2.9
import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:photomanager/Pages/Preview.dart';
import 'package:video_player/video_player.dart';
class CropScreen extends StatefulWidget {
const CropScreen({Key key, this.File}) : super(key: key);
final String File;
#override
_CropScreenState createState() => _CropScreenState();
}
class _CropScreenState extends State<CropScreen> {
VideoPlayerController controller;
Future<void> futureController;
#override
void initState() {
// TODO: implement initState
controller = VideoPlayerController.file(File(widget.File));
controller.setLooping(true);
futureController = controller.initialize();
controller.value.duration;
super.initState();
}
#override
void dispose() {
controller.dispose();
// TODO: implement dispose
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
bottomNavigationBar: BottomAppBar(
color: Colors.black,
child: Row(children: <Widget>[
Padding(
padding: EdgeInsets.all(10),
),
Container(
height: 80,
width: 56,
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Preview()),
);
},
//buttons for croping in different size
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Image.asset(
'assets/Crop/ic_default.png',
height: 56,
width: 56,
),
]),
)),
SizedBox(width: 20),
Container(
height: 77,
width: 56,
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => CropScreen()),
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Image.asset(
'assets/Crop/ic_squre.png',
height: 56,
width: 56,
),
]),
)),
SizedBox(width: 20),
Container(
height: 77,
width: 56,
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => CropScreen()),
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Image.asset(
'assets/Crop/ic_4_5.png',
height: 77,
width: 56,
),
]),
)),
SizedBox(width: 20),
Container(
height: 77,
width: 56,
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => CropScreen()),
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Image.asset(
'assets/Crop/ic_2_3.png',
height: 77,
width: 56,
),
]),
)),
]),
),
body: Column(
children: [
Container(
height: 404,
width: 251,
child:
FutureBuilder(
future: futureController,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return Center(
child: AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: VideoPlayer(controller),
),
);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
),
),
SizedBox(height: 22.47),
Container(
height: 50,
color: Colors.black,
child :Center(
child:Row(children:[
Padding(padding: EdgeInsetsDirectional.fromSTEB(100, 0, 0, 0)),
// flip the video right to left
InkWell(
onTap: () {},
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Image.asset('assets/Crop/flip.png',
// width: 110.0, height: 110.0
),
),
),Padding(padding: EdgeInsetsDirectional.fromSTEB(100, 0, 0, 0)),
//I want to rotate 90degree while on tap on this
InkWell(
onTap: () {},
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Image.asset("assets/Crop/ic_undo.png",
// width: 110.0, height: 110.0
),
),
),
])),
),
Container(
// color: Colors.white,
padding: EdgeInsets.fromLTRB(0, 0, 20, 0),
alignment: Alignment.centerRight,
child: Column(children: [
FloatingActionButton(
mini: true,
backgroundColor: Colors.yellow,
onPressed: () {
if (controller.value.isPlaying) {
setState(() {
controller.pause();
});
} else {
setState(() {
controller.play();
});
}
},
// child:Text(controller.value.size);
child: Icon(
controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
color: Colors.black),
),
]),
),
]));
}
}
In above code i wnat to do rotation of the video and fliping of video where i have written above, and also in cropping section i get some difficulty so please help me out,or i want update every time with single code but i can't know how to do that
controller = call the video which is selected in previous page

How to make this corousel slider clickable in flutter

Here is my code for corousel slider in Flutter, I want to make this slides clickable how can I do that?
When an image in corousel slider is clicked I want to open screen particular to the image category.
class _CarouselExampleState extends State<CarouselExample> {
List imgNews = [
"images/groceries.jpg",
"images/image_1.png",
"images/photographer.jpg",
"images/electrician.jpg",
];
#override
void initState() {
super.initState();
}
List<T> map<T>(List list, Function handler) {
List<T> result = [];
for (var i = 0; i < list.length; i++) {
result.add(handler(i, list[i]));
}
return result;
}
int _current = 0;
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Stack(
children: [
CarouselSlider(
options: CarouselOptions(
autoPlay: true,
height: 150,
viewportFraction: 1.0,
onPageChanged: (index, reason) {
setState(() {
_current = index;
});
},
),
items: imgNews.map(
(url) {
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
child: Image.asset(
url,
fit: BoxFit.fill,
height: 150,
width: 300,
),
),
],
)
);
},
).toList(),
),
Padding(
padding: EdgeInsets.only(top:150),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: map<Widget>(imgNews, (index, url) {
return Container(
width: 6.0,
height: 8.0,
margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _current == index ? Colors.red : Colors.blueGrey,
),
);
}),
),
),
],
)
]
);
}
}
I tried many ways but I was not able to make this corousel_slider clickable, anyone please help, when an image is clicked i want to open screen particular to the image category.
You can use InkWell widget wrapped in Material -
child: Material(
color: Colors.yellow,
child: InkWell(
onTap: () {
// Do something.
},
),
),
In your specific case -
...
items: imgNews.map(
(url) {
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
child: Material(
color: Colors.yellow,
child: InkWell(
onTap: () {
// Do something.
},
child: Image.asset(
URL,
fit: BoxFit.fill,
height: 150,
width: 300,
),
),
),
),
],
),
);
},
).toList(),
...
Here is How you can do that
First Make Carousel Image clickable
in your Case: Wrap it With GestureDetector
ClipRRect(
child: Image.asset(
url,
fit: BoxFit.fill,
height: 150,
width: 300,
),
),
Second Then on Tap of Image Get the Image Index and Pass it to A Function
onTap: () {
imgList.indexOf(url);
indexMethod(imgList.indexOf(url).toString());
},
Last Create a Method
indexMethod(String index) {
switch (index) {
case '0':
{
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HelpPage()),
);
}
break;
case '1':
{
Navigator.push(
context,
MaterialPageRoute(builder: (context) => UpdatesPage()),
);
}
break;
case '2':
{
Navigator.push(
context,
MaterialPageRoute(builder: (context) => UserProfile()),
);
}
break;
}
}
I Just Added This Functionality to My CarouselSlider :D