I'm having trouble figuring out how to layout the widgets in a row so that they won't overflow. I have a Column that contains a row taking all the space except a Card at bottom. Within the Row, I have a List View on the left and a fixed size widget on the right. That causes overflow horizontally. I tried to wrap the Row with a SingleChildScrollView
but that didn't help. Here is my code snippet.
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: ' Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: '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> {
getCard(int level){
double indentation=5.0*level;
return Padding(
padding: EdgeInsets.only(left: indentation),
child: Card(
color: const Color(0xFFF5F5F5),
child: ListTile(
title: Text('List Item ${level + 1}'), // title
subtitle: Text('Description for List Item ${level + 1}'), // subtitle
dense: true,
),
),
);
}
getListView(){
return ListView.builder(
itemCount: 25, // Number of items in the list
itemBuilder: (context, index) {
return GestureDetector(
onTap:(){
setState(() {
});
},
child: getCard(index),
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: [
Expanded(
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: [
getListView(),
const SizedBox(width:2000,
child: Text("A widget with a large size width"),
),
],
),
),
const Text("this needs to be at the bottom of the screen"),
],
),
),
);
}
}
There are several issues with your code.
ListView.builder cannot be used with unbounded width or height. You need to define definite height for ListView.builder.
getListView() {
return Container(
height: 200,
width: 320
child: ListView.builder(
itemCount: 25, // Number of items in the list
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
setState(() {});
},
child: getCard(index),
);
},
);
)
}