Is there a way to show a bottom sheet on Dialogs?
Dialog(
child: Container(
width: 300,
height: 500,
child: Stack(children: [
Column(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
InkWell(
child: Image.asset(AppImages.mood_arrow_up, width: 100),
onTap: () {
showModalBottomSheet(
context: context,
builder: (builder) {
return new Container(
height: 350.0,
color: Colors.transparent,
child: new Container(
child: new Center(
child: new Text("This is a modal sheet"),
)),
);
});
})
])
])));
So I have a dialog at the center of the screen and I want to show a bottom sheet inside the dialog, this code is showing it in the whole scree.
After trying to do so, it seems that it's impossible, I created custom bottom sheet with animation.
double height = 0;
return Dialog(
backgroundColor: Colors.transparent,
child: StatefulBuilder(
builder: (BuildContext context, setState) => Container(
width: 300,
height: 500,
child: Stack(children: [
Container(decoration: BoxDecoration(borderRadius: BorderRadius.circular(10), color: Colors.red)),
Column(children: [
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
IconButton(icon: Image.asset(AppImages.share), iconSize: 35, onPressed: () => pop()),
IconButton(icon: Icon(Icons.close, color: AppColors.textButton), onPressed: () => pop()),
]),
Spacer(),
InkWell(
child: Image.asset(AppImages.mood_arrow_up, width: 100),
onTap: () {
setState(() {
if (height == 0)
height = 200;
else
height = 0;
});
}),
AnimatedContainer(
color: Colors.yellow,
duration: Duration(milliseconds: 200),
height: height,
)
])
]))));
Related
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;
});
},
),
),
],
),
),
),
),
],
),
);
}
I am trying to update a single image in my gridview of images when a user taps on the image but whenever I update a single element of array, it updates the entire gridview. This itself is not bad but since user will be selecting multiple images, it does not look ideal or good. I would appreciate it if someone can guide me to update single element of gridview without updating the entire widget
I am using provider for my state management but I have also tried it with setState. I have include all the code of the gridview file but let me know if you need for info.
Thanks
return Consumer<RemoverList>(
builder: (context, data, child) {
return WillPopScope(
onWillPop: () async {
data.remover.clear();
data.removerBool.clear();
// Provider.of<RemoverList>(context).remover.clear();
return true;
},
child: Scaffold(
body: Container(
height: height,
width: width,
color: Theme.of(context).backgroundColor,
child: SafeArea(
child: Column(
children: [
GestureDetector(
onTap: () {
Navigator.pushNamed(context, 'options');
},
child: Container(
height: height * 0.05,
width: width * 0.95,
margin: const EdgeInsets.symmetric(vertical: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2),
border: Border.all(color: Colors.white)),
child: Center(
child: Text(
widget.album.name,
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25),
),
),
),
),
Expanded(
child: Container(
padding: const EdgeInsets.fromLTRB(0, 5, 0, 5),
// color: Colors.green,
width: width * 0.95,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(5)),
child: GridView.builder(
itemCount: widget.album.images.length,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
mainAxisSpacing: 5,
crossAxisSpacing: 5,
crossAxisCount: 3),
itemBuilder: (context, i) {
data.generateRemoverList(widget.album.images);
var image = Uint8List.fromList(widget
.album.images[i].image['data']
.cast<int>());
return GestureDetector(
onLongPress: () {
// data.tapped(i);
if (data.removerBool.isNotEmpty) {
if (data.removerBool[i] == true) {
setState(() {
data.removerBool[i] = false;
});
} else {
setState(() {
data.removerBool[i] = true;
});
}
}
print(data.removerBool[i]);
print(data.remover);
setState(() {
active = true;
});
data.addToList(
widget.album.images[i].originalName);
},
onTap: () {
if (active == false) {
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return OpenImage(unit: image);
}));
} else if (active == true) {
data.addToList(
widget.album.images[i].originalName);
print(data.remover);
data.removerBool[i] = !data.removerBool[i];
// data.tapped(i);
}
// data.tapped(i);
// print(data.removerBool[i]);
},
child: Container(
decoration: BoxDecoration(
color: Colors.black,
image: DecorationImage(
image: MemoryImage(image),
fit: BoxFit.cover)),
child: Center(
child: data.remover.contains(
widget.album.images[i].originalName)
? const Icon(
Icons.check_box_rounded,
color: Colors.black,
)
: Container(),
),
));
}),
)),
Container(
width: width * 0.95,
margin: const EdgeInsets.symmetric(vertical: 10),
alignment: Alignment.bottomCenter,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: width * 0.45,
child: ElevatedButton(
onPressed: () {},
child: const Text('Add Photos')),
),
Container(
width: width * 0.45,
child: ElevatedButton(
onPressed: () {},
child: const Text('Remove Seleted')),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: width * 0.45,
child: ElevatedButton(
onPressed: () {},
child: const Text('Save')),
),
Container(
width: width * 0.45,
child: ElevatedButton(
onPressed: () {},
child: const Text('Delete Album')),
)
],
)
],
),
)
],
),
),
),
),
);
},
);
}
}
//#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
Im trying to displaying a button inside my stack but it not getting the correct position. The button is the reply Button . I added a foot how it looks at the moment you can check it what I want is displaying it on the right side of the window at the bottom with a bit of spacing between bottom and the button.
Hope anyone can help. if you need more information please leave a comment .
#override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
try {
return Scaffold(
body: StreamBuilder(
stream: mystreamofallvideos,
builder: (context, snapshot) {
if (snapshot.hasData &&
snapshot.connectionState != ConnectionState.waiting) {
return PageView.builder(
itemCount: snapshot.data.docs.length,
controller:
PageController(initialPage: 0, viewportFraction: 1),
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
DocumentSnapshot videos = snapshot.data.docs[index];
return Stack(children: [
Videoplayeritem(widget.videoid),
Column(children: [
Align(
alignment: Alignment.bottomLeft,
child: Container(
height: 100,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
IconButton(
icon: Icon(
Icons.close,
color: Colors.white,
size: 35,
),
onPressed: () {
Navigator.of(context).pop();
}),
SizedBox(
width: 190,
),
],
),
),
),
Container(
color: Colors.red,
width: 210,
height: 94,
//color: Colors.blue.withOpacity(0.5),
child: InkWell(
onTap: () => sharevideo(
widget.videoid, videos.data()['id']),
child: Icon(Icons.reply,
size: 55, color: Colors.white),
),
),
]),
//starssonthe right
]);
});
} else {
return Center(child: CircularProgressIndicator());
}
}),
);
} catch (e) {
e.toString();
}
}
}
This is how it looks
enter image description here
Wrap it in an align and add a padding to the bottom:
Align(
alignment: Alignment.bottomRight,
child: Container(
height: 40,
padding: const EdgeInsets.only(bottom: 16),
child: OutlinedButton(
onPressed: () {},
child: Text('mybutton'),
),
)
you can wrap your container with either Positioned or Align widgets
like :
Positioned(
top: 0.0,
left: 0.0,
child: Icon(Icons.message,
size: 128.0, color: Colors.greenAccent[400]), //Icon
),
I was trying to add floating button to carouselSlider but when i slide carousel i get that pixelerror any idea to fix it ?
CarouselSlider(
height: 540,
initialPage: 0,
autoPlay: false,
reverse: false,
items: imgList.map((imgUrl) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
color: Colors.amber,
),
child: Column(
children: <Widget>[
Image.network(
imgUrl,
fit: BoxFit.fitWidth,
),
Padding(
padding: const EdgeInsets.only(top:13.0),
child: FloatingActionButton(
backgroundColor: Colors.red,
child:icon,
onPressed: () {
setState(() {
icon = Icon(Icons.favorite);
You could put your image and FAB in a Stack Widget with a bottom center alignement like this
Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Image.network(
'imgUrl',
fit: BoxFit.fitWidth,
),
FloatingActionButton(
onPressed: () => print,
)
],
),