Wrapping a Row of Texts with Colored Rounded Box - flutter

Question

Based on the code below, how does one wrap around a row of texts in a container? (as shown in the image). And also, how to make the container slightly rounded as shown in the image?
When I wrap it in a container, why does it takes up the full width of the app from left to right, which is not what I am trying to achieve.
Thank you in advance.
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
child: Expanded(
child: PageView(
controller: _pageController,
onPageChanged: (page) {
setState(() {
currentIndex = page;
});
},
children: [
SingleChildScrollView(
child: Column(
children: [
Container(
padding: EdgeInsets.only(
top: 0, left: 220, right: 30, bottom: 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Expanded(
flex: 7,
child: Text(
'187,177.33',
style: GoogleFonts.openSans(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
),
SizedBox(width: 10),
Expanded(
flex: 4,
child: Text(
'82',
style: GoogleFonts.openSans(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
),
],
),
),
],
),
),
],
),
),
),
],
),
);
}

Answer 1

Use decoration on Container. Also reduce the padding,
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(12)),
child: Row(
return Scaffold(
body: Column(
children: [
Container(
child: Expanded(
child: PageView(
// controller: _pageController,
onPageChanged: (page) {
setState(() {
// currentIndex = page;
});
},
children: [
SingleChildScrollView(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Expanded(
flex: 7,
child: Text(
'187,177.33',
style: GoogleFonts.openSans(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
),
SizedBox(width: 10),
Expanded(
flex: 4,
child: Text(
'82',
style: GoogleFonts.openSans(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
),
],
),
),
),
],
),
),
],
),
),
),
],
),
);
}
More information about Container and layout

Answer 2

Container has property which called decoration, It would does the job for you, Try this:
Container(
margin: EdgeInsets.all(16),
padding:
EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(8)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'187,177.33',
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
SizedBox(width: 10),
Text(
'82',
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
],
),
)