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,
)
],
),
Related
When I use this, the edges of the container are rendered incorrectly (blurred white edges)
Here is the screenshot
Only the image is blurry (centered), but for some reason a blurry white line is displayed at the very top.
Any help is welcome.
Here is the code
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.black,
toolbarHeight: 0,
elevation: 0,
),
body: SafeArea(
child: StatefulBuilder(builder: (ctx, _setState) {
return ColoredBox(
color: Colors.black,
child: Align(
alignment: Alignment.center,
child: GestureDetector(
onVerticalDragEnd: (details) {
if (details.velocity.pixelsPerSecond.dy < -100 ||
details.velocity.pixelsPerSecond.dy > 100) {
Get.back();
}
},
child: CarouselSlider(
options: CarouselOptions(
viewportFraction: 1,
height: double.infinity,
enableInfiniteScroll: false,
disableCenter: true,
autoPlayCurve: Curves.bounceOut,
initialPage: widget.activeSlide,
onPageChanged: (page, _reason) {
_setState(() => widget.activeSlide = page);
},
scrollPhysics: kDefaultScrollPhysics
),
items: widget.post.images.map((image) {
return Builder(
builder: (BuildContext context) => Stack(
children: [
Center(
child: Image.network(
ApiConfig.ensureUrl(image.original) + image.original,
width: double.infinity,
fit: BoxFit.cover,
),
),
Center(
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: Container(
decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
),
),
),
),
Center(
child: Image.network(
ApiConfig.ensureUrl(image.original) + image.original,
fit: BoxFit.contain,
),
),
],
),
);
}).toList(),
),
),
));
}),
),
);
I expect the image to blur correctly and the edges of the container to be completely black (like its background)
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#
i want a slidingUpPanel similar to YouTube comments section. that not open with the scrolling of the content but open and close only from the drag handle by tap or by swipe up/down).
the drag handle is the top section of the slidingUpPanel :
so the draggable should happen only from this drag handle not from the whole body. (you can try the code below to know what i mean)
it means if i scroll the body(the listView builder) the slidingUpPanel keep its place (either open or closed) until i swip it from the drag handle.
my current code:
PanelController panelController = PanelController();
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Stack(
children: [
SlidingUpPanel(
controller: panelController,
maxHeight: MediaQuery.of(context).size.height * .9,
minHeight: MediaQuery.of(context).size.height * .7,
borderRadius: BorderRadius.vertical(top: Radius.circular(40.0)),
panelBuilder: (controller) => Stack(
alignment: Alignment.topCenter,
children: [
GestureDetector(
onTap: () {
panelController.isPanelOpen
? panelController.close()
: panelController.open();
},
child: Container(
color: Colors.transparent,
height: 36.0,
width: MediaQuery.of(context).size.width,
child: Center(
child: Container(
width: 46.77,
height: 4.0,
decoration: BoxDecoration(color: Colors.grey),
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 40.0),
child: ListView.builder(
physics: const AlwaysScrollableScrollPhysics(),
controller: controller,
padding: EdgeInsets.zero,
itemCount: 20,
itemBuilder: (context, index) {
return Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 70.0,
color: Colors.red,
),
),
],
);
}),
),
],
)),
],
),
));
}
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
),
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,
)
])
]))));