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.
- Provider not updating value
- Unable to process request - PLA Update available, while creating the IPA
- Flutter InteractiveViewer with CustomPaint
- how can I solve "Using the Impeller rendering backend." error?
- Run the same app on 2 web browsers / tabs on the same time ( Flutter )
- SlideAction Icon color need to change - Flutter
- Keyboard not being detected. MediaQuery.of(context).viewInsets.bottom always returns 0.0
- Flutter Widget Tests with NetworkImage
- TabBar hiding under Toolbar only on Android Flutter
- List ConnectivityResult
- Future<List<Dynamic>> does not match the return type Future<List<DropzoneFileInterface>>
- Storing time only in Firestore
- Cannot execute /usr/lib/jvm/java-17-openjdk-amd64/bin/java to determine the version
- type 'List<Object?>' is not a subtype of type 'PigeonUserDetails?' in type cast
- error: 'Flutter/Flutter.h' file not found when flutter run on iOS
- Supplied action failed with an exception in Flutter
- The archive did not include a dSYM for the Flutter.framework with the UUIDs
- Flutter Build Error: Process 'command 'E:\Flutter Apps\flutter\bin\flutter.bat'' finished with non-zero exit value 1
- Flutter App Cant Authenticate to Google Drive API Using google_sign_in Package
- Flutter Firebase Auth Redirection Not Working After Login When Previously Logged In and Then Logged Out
- error: style attribute 'android:attr/windowOptOutEdgeToEdgeEnforcement' not found
- Convert camera capture image like camscanner image flutter
- CI/CD Flutter Windows Pipeline
- Flutter Run Error: SocketException - No Route to Host (errno = 65) on iOS Device
- Issues in flutter carplay
- The shrinker may have failed to optimize the Java bytecode
- How to Save Image File in Flutter ? File selected using Image_picker plugin
- Open Particular Screens according to Push Notification data
- How to resize (height and width) of an IconButton in Flutter
- How can I loop audio a custom number of times in a queue with just_audio in Flutter?