I don't understand how to fix the error with a list
There is not enough space for the list, it seems that I did this before and everything worked fine, but now it doesn’t. I recently started developing on flutter, so I might have missed something, I would be grateful if you can help with this error.
home_screen
class HomePage extends StatelessWidget {
final todoRepository = TodoRepository();
@override
Widget build(BuildContext context) {
// final TodoBloc todoBloc = context.read<TodoBloc>();
return BlocProvider<TodoBloc>(
create: (context) => TodoBloc(todoRepository),
child: Scaffold(
appBar: AppBar(
title: const Text('Flutter Todos'),
),
// floatingActionButton: FloatingActionButton(
// onPressed: () {
// // _addTodo(context);
// final newTodo = Todo(description: 'Todo 1');
// BlocProvider.of<TodoBloc>(context).add(CreateTodos(newTodo));
// },
// child: const Icon(Icons.add),
// ),
body: Column(
// crossAxisAlignment: CrossAxisAlignment.center,
children: [
ActionButton(),
TodoList(),
],
)),
);
}
list_screen
class TodoList extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Todo todo;
return BlocBuilder<TodoBloc, TodoState>(builder: (context, state) {
if (state is TodoEmptyState) {
return const Center(
child: Text(
'No Todo',
style: TextStyle(fontSize: 20.0),
),
);
}
if (state is TodoLoadingState) {
return const Center(child: CircularProgressIndicator());
}
// final todos = (state is TodoLoadedState);
// return Container();
if (state is TodoLoadedState) {
return ListView.builder(
shrinkWrap: true,
itemCount: state.loadedUser.length,
itemBuilder: (context, index) =>
// return _buildListTile(state.loadedUser[index]);
Expanded(
child: Container(
child: ListTile(
title: Column(children: [
Text('${state.loadedUser[index].description}')
])))));
}
return const SizedBox.shrink();
});
}
Try changing your HomePage widget code like so:
class HomePage extends StatelessWidget {
final todoRepository = TodoRepository();
@override
Widget build(BuildContext context) {
// final TodoBloc todoBloc = context.read<TodoBloc>();
return BlocProvider<TodoBloc>(
create: (context) => TodoBloc(todoRepository),
child: Scaffold(
appBar: AppBar(
title: const Text('Flutter Todos'),
),
// floatingActionButton: FloatingActionButton(
// onPressed: () {
// // _addTodo(context);
// final newTodo = Todo(description: 'Todo 1');
// BlocProvider.of<TodoBloc>(context).add(CreateTodos(newTodo));
// },
// child: const Icon(Icons.add),
// ),
body: SingleChildScrollView(
child: Column(
// crossAxisAlignment: CrossAxisAlignment.center,
children: [
ActionButton(),
TodoList(),
],
),
)),
);
}
}
And Add this line
physics: const NeverScrollableScrollPhysics(),
to your ListView.builder()
widget in your TodoList
widget
Explanation:
When your content of your screen exceeds its height, you need to wrap it with a scrollable widget (like SingleChildScrollView
) to allow scrolling to access the remaining content.
However, if you have another scrollable widget inside your parent scrollable widget (Your ListView
in your TodoList
widget, then the scrolling will have conflict. So that's why you can add NeverScrollableScrollPhysics()
to the child scrollable to allow scrolling of the parent scrollable only.
Update:
For the error Exception caught by widgets library Incorrect use of ParentDataWidget
it's happening because you have an Expanded
widget as a direct child of your ListView
widget in your TodoList
widget. So removing the Expanded
widget will fix the error
return ListView.builder(
shrinkWrap: true,
itemCount: state.loadedUser.length,
itemBuilder: (context, index) => Container(
child: ListTile(
title: Column(
children: [
Text('${state.loadedUser[index].description}'),
],
),
),
),
);
Note: I kept your Container
widget just in case you put it for a reason to add more styling to your ListTile, but I recommend you remove it if you're not going to do anything with it.