flutter listview and columns side by side - flutter

Question

I want to create a row with the left side having a listview builder and right side with a container or columns of texts. I have tried the following code but it is showing blank screen
Widget invSection1 = Row(
children: <Widget>[
ListView.builder(
itemCount: 1, // the length
shrinkWrap: true,
itemBuilder: (context, index) {
return Container(
child: Card(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: new List.generate(
10,
(index) => new ListTile(
title: Text('Item $index'),
subtitle: Text('Item $index subtitle'),
trailing: Icon(Icons.shop_two),
),
),
)
)
),
);
}),
Expanded(
child: Text('Craft beautiful UIs', textAlign: TextAlign.center),
)
]);

Answer 1

In this, you have to give some width as the parent, because the parent can size itself based on the children, As you are using the Row widget and the use of listview does not allow it to make specific constraints. just check out the example :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
MyApp({Key key}) : super(key: key);
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
Widget invSection1 = Row(
children: <Widget>[
Container(
width: 200,
child: ListView.builder(
itemCount: 1, // the length
shrinkWrap: true,
itemBuilder: (context, index) {
return Container(
child: Card(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: new List.generate(
10,
(index) => new ListTile(
title: Text('Item $index'),
subtitle: Text('Item $index subtitle'),
trailing: Icon(Icons.shop_two),
),
),
))),
);
}),
),
Expanded(child: Text('Craft beautiful UIs', textAlign: TextAlign.center))
]);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(child: invSection1),
),
);
}
}

Answer 2

This is expected behavior. Any widget in a row has unlimited space to expand horizontally. The ListView has no constraints on it's width and will attempt to take the maximum available space.
What you can do is limit the horizontal space available to the ListView. This can be done by many approaches, eg. like wrapping it inside a SizedBox and setting a finite width.