Place Widgets at the edge of their parent widget - flutter

Question

EDIT: Added a screenshot of the desired output
Goal: Placing a group of widgets (RoundButtons and Text widgets) at the edge of their parent widget
Problem: The widgets that need to move are still close to their nearby widgets
Here is a screenshot showing the problem:
Here's the desired output:
The following code snippet shows the widgets that I need to move to the end of the parent:
Widgets to be moved: inner Row and its widgets.
Row(//parent widget
children: <Widget>[
Row(//To be moved to the end of the parent
children: <Widget>[
RoundIconButton(
icon: FontAwesomeIcons.minus, onPressed: () {}),
Text('$_counter'),
RoundIconButton(
icon: FontAwesomeIcons.plus, onPressed: () {}),
],
),
Text('10000', style: GoogleFonts.cairo(fontSize: 15)),
],
),
Here is the current implementation that corresponds to the screenshot above:
Container(
width: deviceWidth,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: EdgeInsets.only(right: 10),
child: Column(
textDirection: TextDirection.rtl,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Product',
style: GoogleFonts.cairo(
fontSize: 15,
),
),
Text(
'subtitle',
style: GoogleFonts.cairo(
fontSize: 15,
fontWeight: FontWeight.w200,
),
),
StrikeThroughWidget(
child: Text(
'5000',
style: GoogleFonts.cairo(
fontSize: 10,
fontWeight: FontWeight.w200,
),
),
),
Row(
children: <Widget>[
Row(
children: <Widget>[
RoundIconButton(
icon: FontAwesomeIcons.minus, onPressed: () {}),
Text('$_counter'),
RoundIconButton(
icon: FontAwesomeIcons.plus, onPressed: () {}),
],
),
Text('10000', style: GoogleFonts.cairo(fontSize: 15)),
],
),
],
),
),
Container(
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.grey[350])),
width: 90,
height: 90,
child: FlutterLogo(),
),
],
),
),
Already-tried Solutions:
Changing mainAxisAlignment of the Row with multiple values but didn't get the desired output
Placing the Row inside of a Flex Widget

Answer 1

You can separate the Widgets in multiple layers using Stack and use Position to place the layers exactly where you want.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Material(
child: Center(
child: Stack(
children: <Widget>[
Container(
width: 500,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: EdgeInsets.only(right: 10),
child: Column(
textDirection: TextDirection.rtl,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Product'),
Text('subtitle'),
Text('5000'),
Text('10000'),
],
),
),
Container(
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.grey[350])),
width: 90,
height: 90,
child: FlutterLogo(),
),
],
),
),
Positioned(
bottom: 0,
left: 0,
child: Row(
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.blue,
radius: 20,
child: IconButton(
padding: EdgeInsets.zero,
icon: Icon(Icons.add),
color: Colors.white,
onPressed: () {},
),
),
Text('1'),
CircleAvatar(
backgroundColor: Colors.blue,
radius: 20,
child: IconButton(
padding: EdgeInsets.zero,
icon: Icon(Icons.remove),
color: Colors.white,
onPressed: () {},
),
),
],
),
)
],
),
),
),
);
}
Hope this helps.

Answer 2

You could use a Stack and Positioned:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Material(child: Center(
child:
Container(
color: Colors.grey,
width: 400,
height: 100,
child: Stack(children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: EdgeInsets.only(right: 10),
child: Column(
textDirection: TextDirection.rtl,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Product',
style: TextStyle(
fontSize: 15,
),
),
Text(
'subtitle',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w200,
),
),
Text(
'5000',
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w200,
),
),
],
),
),
Container(
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.grey[350])),
width: 90,
height: 90,
child: FlutterLogo(),
),
],
),
Positioned(
bottom: 0,
left: 0,
child: Row(
children: <Widget>[
Row(
children: <Widget>[
RawMaterialButton(
child: Text("-"), onPressed: () {}),
Text('6'),
RawMaterialButton(
child: Text("+"), onPressed: () {}),
],
),
Text('10000', style: TextStyle(fontSize: 15)),
],
),),
]
),),),),
);
}
}

Answer 3

Try adding a Spacer
Row(//parent widget
children: <Widget>[
Row(//To be moved to the end of the parent
children: <Widget>[
RoundIconButton(
icon: FontAwesomeIcons.minus, onPressed: () {}),
Text('$_counter'),
RoundIconButton(
icon: FontAwesomeIcons.plus, onPressed: () {}),
],
),
Spacer(),//Where I added the spacer
Text('10000', style: GoogleFonts.cairo(fontSize: 15)),
],
),