FLUTTER: Divider() in Column inside a Row does not appear - flutter

Question

I need to put a divider in a Column inside a Row but the divider does not appear. I saw some questions about the Row should not be used but in my case, I need the Row. Here is the simplest code, I need the divider to be shown
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(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: const [
Text('up'),
Divider(
color: Colors.black,
thickness: 2,
),
Text('bottom'),
],
),
],
),
),
);
}
}

Answer 1

To get the divider to show, you need to warp your Divider() with a SizedBox() and define a set width. As well as removing const form the Column() since we're using MediaQuery:
SizedBox(
width: MediaQuery.of(context).size.width,
child: Divider(
color: Colors.black,
thickness: 2,
),
),
Result:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp();
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({required this.title});
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Text('up'),
SizedBox(
width: MediaQuery.of(context).size.width,
child: Divider(
color: Colors.black,
thickness: 2,
),
),
Text('bottom'),
],
),
],
),
),
);
}
}

Answer 2

While the structure is
Center
- Row
- Column
- Text
- Divider
- Text
This divider doesn't get any constrained and the result is invisible on UI.
Wrapping Divider with SizedBox provide the constraints, and we are able to see the divider. Also you can go for Expanded on Column widget.
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Column(
children: const [
Text('up'),
Divider(
color: Colors.green,
thickness: 2,
),
Text('bottom'),
],
),
),
],
),
),