How to get two rows in ListView.separated - flutter

Question

I wanted to achieve the following output but instead of one row in a column, I want to show two rows in a column using ListView.separated. How can I get it? ListView.separated does not have any option to display 2 rows.
Scaffold(
body: ListView.separated(
itemBuilder: (context, position) {
return Container(
height: 40.0,
color: Colors.white,
child: Text('Your text goes here'),
);
},
separatorBuilder: (context, position) {
return Container(
color: Colors.red,
child: Text('Divider'),
);
},
itemCount: 20,
),
));

Answer 1

To achieve this, you can use the Row widget. In order to expand the Text widgets, you can wrap them with Expanded.
Full working example, based on your code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView.separated(
itemBuilder: (context, position) {
return Container(
height: 40.0,
color: Colors.white,
child: Text('Your text goes here'),
);
},
separatorBuilder: (context, position) {
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
child: Text(
'Divider 1',
textAlign: TextAlign.center,
),
),
),
Expanded(
child: Container(
color: Colors.red,
child: Text(
'Divider 2',
textAlign: TextAlign.center,
),
),
),
],
);
},
itemCount: 20,
),
),
);
}
}