flutterandroid-studiostackflutter-listviewflutter-stacked
adjust height and width of image widget in Stack
Hi DevCommunity.... i am facing an issue in this screen. i am currently working on flutter project. As you got the idea from pic, what i am trying to do. I used Container with child (Stack), the BG pattern is stack's first child and then the other ones. i have used this pattern Image as ImageAsset but it does not displays under the removed background PNG image. Give me any suggestion or Solution so that i can solve this issue. That's the Stuff i did recently.
ListView.builder(
itemCount: box.length ,
shrinkWrap: true,
reverse: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
var currentBox = box.getAt(index);
print('currentBox: ${currentBox['imagePath']}');
_calculateImageDimension(currentBox['imageBytes']).then((size) {
imageHeight = size.height;
imageWidth = size.width;
print("size = ${size}");
}); // 487.0,696.0
return Container(
width: double.infinity,
margin: EdgeInsets.symmetric(
horizontal: 23.w, vertical: 10.h),
decoration: BoxDecoration(
color: ColorConstants.secondaryColor,
borderRadius:
BorderRadius.circular(16.r),
boxShadow: [
BoxShadow(
color: ColorConstants.shadowColor,
blurRadius: 54,
)
]),
child: Column(
children: [
//Close Screen
Align(
alignment: Alignment.topRight,
child: Padding(
padding: EdgeInsets.only(
top: 10.0.h, right: 10.0.w),
child: GestureDetector(
onTap: () {
if (box.length == 1) {
imageBox.clear();
Get.offAll(
const ImageSelectorScreen());
} else {
imageBox.deleteAt(index);
_.refreshItems();
}
},
child: SvgPicture.asset(
ImageResources
.crossLogo)),
)),
//Original & Removed BG Button Widgets
Padding(
padding: EdgeInsets.symmetric(
horizontal: 8.0.w),
child: Row(
children: [
SizedBox(
height: 50.h,
child: Stack(
children: [
TextButton(
onPressed: () {
setState(() {
textOne = true;
textTwo = false;
currentIndex = index;
});
},
style: TextButton
.styleFrom(
padding:
EdgeInsets.only(
top: 7.h),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius
.all(Radius
.circular(
3))),
),
child: Text(
'Original',
style: GoogleFonts.inter(
fontSize: 12.sp,
fontWeight: textOne && currentIndex == index ? FontWeight.bold : FontWeight.normal,
shadows: [
Shadow(
color: textOne && currentIndex == index ? ColorConstants.primaryColor : ColorConstants.blackColor,
offset:
const Offset(0, -3))
],
color: Colors.transparent,
))),
Positioned(
top: 33,
child: Container(
height: textOne && currentIndex == index ? 3.h : 0,
width: 50.w,
margin: EdgeInsets.symmetric(
horizontal: 7.w),
decoration: BoxDecoration(
color: textOne ? ColorConstants.primaryColor : ColorConstants.blackColor,
borderRadius: BorderRadius.circular(2.r),
),
),
),
],
),
),
SizedBox(
width: 10.h,
),
ClipRRect(
borderRadius: BorderRadius.circular(2),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () {
_toggleTextTwo(index: index);
},
highlightColor: Colors.transparent,
splashColor: ColorConstants.shadowColor.withOpacity(0.1),
child: Ink(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: textTwo && currentIndex == index ? SvgPicture.asset(ImageResources.removedButton, width: 140,)
: Text('Removed Background',
style: AppTextStyles.text12Black,),
))),
),
),
],
),
),
Stack(
children: [
if(textOne)
const SizedBox()
else Image.asset(ImageResources.transparentBg),
if(currentBox['imagePath'] != null)
if(textOne &¤tIndex == index) Align(
alignment: Alignment.center,
child: Image.file(File(currentBox['imagePath']),
fit: BoxFit.cover,) ) else const SizedBox(),
if(currentBox['imageUrl'] != '' )
if(textOne && currentIndex == index)
Align(
alignment: Alignment.center,
child: Image.network(currentBox['imageUrl'] ??'',
fit: BoxFit.cover,)) else const SizedBox(),
if(currentBox['imageBytes'] != null )
Align(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.all(18.0),
child: textOne && currentIndex == index ? const SizedBox() : ColorFiltered(
colorFilter: const ColorFilter.mode(Colors.black, BlendMode.dstIn),
child: Image.memory(
currentBox['imageBytes'],
fit: BoxFit.scaleDown,
),
),
)),
//DropDown Widget
textOne ? const SizedBox()
: Align(
alignment: Alignment.topRight,
child: Container(
width: dropdownValue == 'High-Res' ? 110.w : 90.w,
height: 35.h,
margin: EdgeInsets.all(8.h),
decoration: BoxDecoration(
color: ColorConstants.primaryColor,
borderRadius: BorderRadius.circular(30.r),
),
child:
Center(
child: DropdownButton2(
isDense: true,
underline: const SizedBox(),
customButton: Padding(
padding: EdgeInsets.only(left: 5.h),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
dropdownValue.isNotEmpty ? dropdownValue : 'Edit',
style: AppTextStyles.text12Primary.copyWith(color: ColorConstants.secondaryColor),
),
Icon(
Icons.arrow_drop_up_outlined,
color: ColorConstants.secondaryColor,
)
],
),
),
dropdownStyleData: DropdownStyleData(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14.r),
color: Colors.white,
),
offset: const Offset(-8, -8),
scrollbarTheme: ScrollbarThemeData(
radius: Radius.circular(40.r),
thickness: MaterialStateProperty.all(6),
thumbVisibility: MaterialStateProperty.all(true),
),
),
items: [
...MenuItems.firstItems.map(
(item) => DropdownMenuItem<MenuItem>(
value: item,
child: MenuItems.buildItem(item),
),
),
...MenuItems.secondItems.map(
(item) => DropdownMenuItem<MenuItem>(
value: item,
child: MenuItems.buildItem(item),
),
),
],
onChanged: (value) {
setState(() {
MenuItems.onChanged(context, value! as MenuItem);
});
}),
),
),
),
],
),
//Download Buttons Row
Padding(
padding: EdgeInsets.only(
left: 40.w,
right: 40.w,
top: 15.h,
bottom: 8.h),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: TextButton(
onPressed: () {
controller
.saveNetworkImage(
controller
.imageBytes!);
},
style: TextButton.styleFrom(
backgroundColor:
ColorConstants
.primaryColor),
child: Text(
'Download',
style: AppTextStyles
.text12Primary
.copyWith(
color: ColorConstants
.secondaryColor,
fontWeight:
FontWeight
.w700),
)),
),
SizedBox(
width: 20.w,
),
Expanded(
child: TextButton(
onPressed: () {},
style: TextButton.styleFrom(
backgroundColor:
ColorConstants
.secondaryColor,
side: BorderSide(
width: 2.w,
color: ColorConstants
.primaryColor)),
child: Text(
'Download HD',
style: AppTextStyles
.text12Primary
.copyWith(
fontWeight:
FontWeight
.bold),
)),
),
],
),
),
//Preview Image Text Row
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Text(
'Preview image',
style: AppTextStyles
.text12Black,
),
Row(
mainAxisAlignment:
MainAxisAlignment
.center,
children: [
Text(
'375 x 666',
style: AppTextStyles
.text12Primary,
),
Icon(
Icons.info_outline,
color: ColorConstants
.blackColor,
size: 12,
)
],
)
],
),
Column(
children: [
Text(
'Full image',
style: AppTextStyles
.text12Black,
),
Row(
mainAxisAlignment:
MainAxisAlignment
.center,
children: [
Text(
'1080 x 1920',
style: AppTextStyles
.text12Primary,
),
Icon(
Icons.info_outline,
color: ColorConstants
.blackColor,
size: 12,
)
],
)
],
)
],
),
//Rating Bar Widget
Align(
alignment: Alignment.bottomCenter,
child: Column(
children: [
SizedBox(
height: 15.h,
),
Text(
'Rate This Result',
style:
AppTextStyles.text12Black,
),
SizedBox(
height: 3.h,
),
RatingBar.builder(
initialRating: 0,
minRating: 1,
itemSize: 25,
direction: Axis.horizontal,
allowHalfRating: false,
itemCount: 5,
itemPadding: EdgeInsets.zero,
itemBuilder: (context, _) =>
const Icon(
Icons.star,
color: Color(0xffFCE340),
),
// glowColor: Colors.transparent,
glow: false,
updateOnDrag: false,
onRatingUpdate: (rating) {
print(rating);
},
),
SizedBox(
height: 15.h,
),
],
),
)
],
),
);
})
Solution
As you want to display an image on another background image, I will suggest you to use a Container instead of a Stack.
The Container widget has a decoration property where you can put an image and fit it to the parent layout.
I am not able test your code because there are many details that are not important on this issue, so I will just put an example on how that part will look like:
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.5,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/background.png'),
fit: BoxFit.cover,
),
),
child: Center(
child: Image.asset('assets/foreground.png'),
),
)
The fit property will make the background to take all the space of the container.
- Flutter build for iOS simulator
- Connect from ios device to localhost
- Flutter VS code plugin stuck Waiting for connection from debug service on Chrome
- Shape of FilterChip in flutter
- Where are the icons from?
- PlatformException(invalid_image, Cannot load representation of type public.jpeg, NSItemProviderErrorDomain, null)
- Flutter TabBar item not filling all remaining space
- Flutter - Error: The getter X isn't defined for the class
- How do I return a FileResponse (or StreamingResponse) in flet-fastapi?
- onPressed "invalid constant value" error in Flutter
- Flutter GetX Re-Initialise GetX Controller Reset GetX Controller, Reset GetX Controller Values
- "Your Android App Bundle has more than 1 certificate chain."
- How to solve "RangeError (index): Invalid value: Only valid value is 0: 1" error
- analysis_options.yaml the included file not found
- how to show CircularProgressIndicator while loading Image.file in flutter
- BUG! exception in phase 'semantic analysis' in source unit '_BuildScript_' Unsupported class file major version 61 on Apple Arm
- Flutter image generation in background
- How to solve flutter web api cors error only with dart code?
- Rectangle component with round corners
- Can I use SQLite Flutter for web apps?
- Flutter desktop app for MacOS using extra binaries crashes when exported
- how to change the alignment of title and subtitle in listtile in flutter ? ( right to left )
- Container overflowed in the widget
- How to get status bar height in Flutter?
- Create reusable appBar in flutter
- Flutter: FCM send notification to multiple devices not working
- Flutter SVG rendering
- 401 unAuthorized response when making get request in flutter with Dio or http packages
- How to hide widget from UI without taking any space
- Unable to load asset with package structure