A RenderFlex overflowed by 330 pixels on the right - flutter

Question

Scaffold(
resizeToAvoidBottomInset: false,
body: Container(
height: 100,
width: MediaQuery.of(context).size.width * 1,
color: const Color(0xFF722a8c),
child: ListView(
children: [
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 10),
child: Text(
"COLORS ",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
const SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(left: 28),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 0),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(20),
),
child: const Icon(
Icons.check,
color: Colors.white,
),
),
),
const SizedBox(
width: 5,
),
Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color: const Color(0xFFf44136),
borderRadius: BorderRadius.circular(20),
),
),
const SizedBox(
width: 5,
),
Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color: const Color(0xFF2295f6),
borderRadius: BorderRadius.circular(20),
),
),
const SizedBox(
width: 5,
),
Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color: Color(0xFF4daf52),
borderRadius: BorderRadius.circular(20),
),
),
],
),
)
],
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
"CLEAR ALL ",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
const SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(right: 50),
child: Row(
children: [
Padding(
padding: EdgeInsets.only(left: 50),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border:
Border.all(color: Colors.white, width: 3),
),
child: const Icon(
Icons.clear,
color: Colors.white,
),
),
),
],
),
),
]),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
"ERASER",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
const SizedBox(
height: 5,
),
Padding(
padding: const EdgeInsets.only(right: 50),
child: Row(children: [
Padding(
padding: const EdgeInsets.only(left: 60),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: Image.asset(
'assets/icon.png',
color: Colors.white,
),
),
),
]),
)
]),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
"UNDO ",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.only(right: 10),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 20),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: const Icon(
Icons.undo,
color: Colors.white,
size: 45,
),
),
),
],
),
),
]),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
"REDO ",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.only(right: 100),
child: Row(children: [
Padding(
padding: const EdgeInsets.only(left: 0),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: const Padding(
padding: EdgeInsets.only(left: 50),
child: Icon(
Icons.redo,
color: Colors.white,
size: 50,
),
),
),
),
]),
)
]),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
"SAVE",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.only(right: 0),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 0),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border:
Border.all(color: Colors.white, width: 3),
),
child: const Icon(
Icons.check,
color: Colors.white,
),
),
),
],
),
),
]),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 30),
child: Text(
"DO NOT SAVE",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.only(
left: 28,
),
child: Row(children: [
Padding(
padding: const EdgeInsets.only(
right: 10,
),
child: Container(
child: const Text(
"Cancel",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
)),
),
]),
)
]),
]),
],
)),
);

Answer 1

As for inner row's children, there will different screen-size devices. While you've used Row you can make it horizontal scrollable by wrapping Row with a scrollable widget like ListView. For theses few buttons, we can use SingleChildScrollView
body: Container(
height: 100,
width: MediaQuery.of(context).size.width,
color: const Color(0xFF722a8c),
child: ListView(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal, ///make sure to use horizontal
child: Row(children: [
Column(
Also you can try Wrap, or ListView (+with builder) widgets.