Firstly, you were using Row where you should have used a Column instead for the layout. See the code below. For the Horizontally showing "days" I have shown a few alternative ways you can choose from.
Note: In Row, the MainAxisAlignment.spaceBetween makes use of the space occupied by the Row widget itself, where it distributes the leftover space between its children. When we wrapped Row with SingleChildScrollView it provides infinite constraint for the Row to expand, but Row instead chooses to be as small as possible by default and it seems there is no extra space left in the row between the widgets.
Code:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(home: const MyHomePage());
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final List<String> _days = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Example"),
backgroundColor: Colors.blue,
),
body: SafeArea(
child: Column( // Use Column here, not Row
children: [
Padding(
padding: const EdgeInsets.all(8),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("08:00"),
Text("10:00"),
Text("12:00"),
Text("14:00"),
//etc.
],
),
),
SizedBox(height: 20.0),
// Alternative 01:
Wrap(
spacing: 20.0, // space between widgets
// runSpacing: 20.0, // between wrapped lines of widgets
children: [
Text("Monday", textAlign: TextAlign.center),
Text("Tuesday", textAlign: TextAlign.center),
Text("Wednesday", textAlign: TextAlign.center),
Text("Thursday", textAlign: TextAlign.center),
Text("Friday", textAlign: TextAlign.center),
Text("Saturday", textAlign: TextAlign.center),
Text("Sunday", textAlign: TextAlign.center),
//etc.
],
),
SizedBox(height: 20.0),
// Alternative 02:
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment:
.spaceBetween, // this will not look as you might assume in case the space is limited, so use sized boxes.
children: [
Text("Monday", textAlign: TextAlign.center),
SizedBox(width: 20.0), // Use between each
Text("Tuesday", textAlign: TextAlign.center),
Text("Wednesday", textAlign: TextAlign.center),
Text("Thursday", textAlign: TextAlign.center),
Text("Friday", textAlign: TextAlign.center),
Text("Saturday", textAlign: TextAlign.center),
Text("Sunday", textAlign: TextAlign.center),
// Just to demonstrate horizontal space constraint, adding extra widgets
Text("Extra01", textAlign: TextAlign.center),
Text("Extra02", textAlign: TextAlign.center),
Text("Extra03", textAlign: TextAlign.center),
],
),
),
SizedBox(height: 20.0),
// Alternative 03:
SizedBox(
height: 50, // Horizontal ListViews need a defined height
child: ListView.separated(
scrollDirection: Axis.horizontal,
itemCount: _days.length,
separatorBuilder: (context, index) =>
SizedBox(width: 20), // The "Gap"
itemBuilder: (context, index) =>
Center(child: Text(_days[index])),
),
),
],
),
),
);
}
}
