Flutter Align topRight in a card in row is not working, keep sticking to the left
I have a card widget that wraps around few alignments. The centered and bottom left alignment works, but I want to show something on the topRight too, it keeps sticking to the left.
Image:
Code for my card.dart
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => RecipeDetailPage(
recipeName: recipeName,
estTimeMin: estTimeMin,
availableIngredients: availableIngredients,
missingIngredients: missingIngredients,
instructions: instructions,
thumbnailUrl: thumbnailUrl,
),
));
},
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 22, vertical: 10),
width: MediaQuery.of(context).size.width,
height: 180,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.6),
offset: const Offset(
0.0,
10.0,
),
blurRadius: 10.0,
spreadRadius: -6.0,
),
],
image: DecorationImage(
colorFilter: ColorFilter.mode(
Colors.white.withOpacity(0.35),
BlendMode.multiply,
),
image: NetworkImage(thumbnailUrl),
fit: BoxFit.cover,
),
),
child: Stack(
children: [
Align(
alignment: Alignment.topRight,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.all(5),
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.blueGrey.shade800,
borderRadius: BorderRadius.circular(15),
),
child: const Row(
children: [
Icon(
Icons.bubble_chart,
color: Colors.white,
size: 18,
),
SizedBox(width: 7),
Text(
"LLM: \$placeholder",
style: TextStyle(
color: Colors.white,
),
),
],
),
)
],
),
),
Align(
alignment: Alignment.center,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 10.0,
vertical: 5.0,
),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.8),
borderRadius: BorderRadius.circular(10),
),
child: Text(
recipeName,
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
overflow: TextOverflow.ellipsis,
maxLines: 2,
textAlign: TextAlign.center,
),
),
),
Align(
alignment: Alignment.bottomLeft,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.all(5),
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.8),
borderRadius: BorderRadius.circular(15),
),
child: Row(
children: [
const Icon(
Icons.schedule,
color: Colors.blue,
size: 18,
),
const SizedBox(width: 7),
Text("$estTimeMin mins"),
],
),
)
],
),
),
],
),
),
);
}
Solution
The default mainAxisSize is max on Row. You can set to mainAxisSize: MainAxisSize.min.
InkWell(
onTap: () {},
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 22, vertical: 10),
width: MediaQuery.of(context).size.width,
height: 180,
color: Colors.blueGrey.shade800,
child: Stack(
children: [
Align(
alignment: Alignment.topRight,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
children: [
Container(
padding: const EdgeInsets.all(5),
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.blueGrey.shade800,
borderRadius: BorderRadius.circular(15),
),
child: const Row(
children: [
Icon(
Icons.bubble_chart,
color: Colors.white,
size: 18,
),
SizedBox(width: 7),
Text(
"LLM: \$placeholder",
style: TextStyle(
color: Colors.white,
),
),
],
),
)
],
),
),
Align(
alignment: Alignment.center,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 10.0,
vertical: 5.0,
),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.8),
borderRadius: BorderRadius.circular(10),
),
child: Text(
"recipeName",
),
),
),
Align(
alignment: Alignment.bottomLeft,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.all(5),
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.8),
borderRadius: BorderRadius.circular(15),
),
child: Row(
children: [
const Icon(
Icons.schedule,
color: Colors.blue,
size: 18,
),
const SizedBox(width: 7),
Text("estTimeMin mins"),
],
),
)
],
),
),
],
),
),
)
- How to solve "Unable to find git in your PATH" on Flutter?
- How to make the origin (0,0) point in flame engine in the bottom
- How to reset a Hive Database in Flutter
- URI doesn't exist in flutter
- url_launcher: canLaunch / launch don't work on iOS for simple URL scheme?
- Why is the reference crossed out when getting a reference when using a firebase database in Flutter?
- CMake Error at CMakeLists.txt:3 (project) could not find specified instance of Visual Studio
- Using getX in Flutter with a singleton service
- Error when adding a new language (Flutter)
- How to search in Firestore database?
- Error: The lower bound of "sdk: '>=2.7.0 <3.0.0'" must be 2.12.0' or higher to enable null safety
- change customscrollview scroll color
- Getting screen size in a class without buildcontext in Flutter
- Multidex issue with Flutter
- How to pass data inside itemBuilder when building ListView?
- Data from another screen
- flutter: animate transition to named route
- How to handle flutter bottom navigation bar when back button is pressed to go to the HomeScreen
- When running flutter app on window it show following error
- Use Bearer token with Openapi generator generated dart-dio API client
- How to do "flutter run" on a physical Android device without default log messages?
- How to solve the problem of widget redrawing when changing screen size?
- How to set width of the flutter togglebuttons widget
- Why is GetStorage() not retaining value of multiple containers?
- My Flutter App is not running after adding cloud_firebase package
- How can I change the background color of Elevated Button in Flutter from function?
- flutter: ITMS-91053 cant see the PrivacyInfo.xcprivacy file
- How to automatically upgrade Flutter dependencies
- How to add the lines on the List tile
- Why is onLongPress() not functioning properly?