I have a list view in flutter(v3.0.4), now I want the list view scroll, this is the code looks like:
Widget _buildTodoView(BuildContext context) {
return Container(
key: _inputViewKey,
width: double.infinity,
child: SingleChildScrollView(
child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: c.widgetsList.obs,
),
controller: scrollController,
scrollDirection: Axis.vertical,
padding: const EdgeInsets.all(8),
),
);
}
and this is the widgetsList render function:
List<Widget> buildTodoItems(List<Todo> newTodos) {
List<Widget> widgets = new List.empty(growable: true);
newTodos.forEach((element) {
var card = SizedBox(
height: 50,
child: Card(
child: Slidable(
actionPane: SlidableDrawerActionPane(),
actionExtentRatio: 0.25,
actions: <Widget>[
IconSlideAction(
caption: '删除',
color: Colors.blue,
icon: Icons.archive,
onTap: () => {
removeTodo(element)
},
),
],
child: CheckboxListTile(
controlAffinity: ListTileControlAffinity.leading,
title: Text(element.name,style:element.isCompleted == 1? TextStyle(color: Colors.grey):TextStyle(color: Colors.black)),
value: element.isCompleted == 1?true:false,
checkColor: Colors.green,
selected: element.isCompleted == 1?true:false,
onChanged: (bool? value) {
if(value!){
element.isCompleted = 1;
}else{
element.isCompleted = 0;
}
var _db = DBProvider.db;
_db.updateTodo(element).then((value) => {
_db.getAllTodo().then((value1) => {buildTodoItems(value1)})
});
},
)),
));
widgets.add(card);
});
widgetsList = widgets;
update();
return widgets;
}
when I build the application, the error shows like this:
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞══════════════════════<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mThe following assertion was thrown during layout:<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mA RenderFlex overflowed by 510 pixels on the bottom.<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mThe relevant error-causing widget was:<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m Column<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m Column:file:///Users/xiaoqiangjiang/source/reddwarf/frontend/tik/lib/pages/home/home.dart:39:14<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mTo inspect this widget in Flutter DevTools, visit:<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mhttp://127.0.0.1:9100/#/inspector?uri=http://127.0.0.1:56558/_r8RvWY6MD8=/&inspectorRef=inspector-0<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mThe overflowing RenderFlex has an orientation of Axis.vertical.<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mThe edge of the RenderFlex that is overflowing has been marked in<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mthe rendering with a yellow and black striped pattern. This is<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196musually caused by the contents being too big for the RenderFlex.<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mConsider applying a flex factor (e.g. using an Expanded widget)<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mto force the children of the RenderFlex to fit within the<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mavailable space instead of being sized to their natural size.<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mThis is considered an error condition because it indicates that<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mthere is content that cannot be seen. If the content is<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mlegitimately bigger than the available space, consider clipping<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mit with a ClipRect widget before putting it in the flex, or using<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196ma scrollable container rather than a Flex, like a ListView.<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mThe specific RenderFlex in question is: RenderFlex#7823e relayoutBoundary=up6 OVERFLOWING:<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m needs compositing<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m parentData: <none> (can use size)<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m constraints: BoxConstraints(0.0<=w<=320.0, h=456.0)<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m size: Size(320.0, 456.0)<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m direction: vertical<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m mainAxisAlignment: start<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m mainAxisSize: max<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m crossAxisAlignment: center<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m verticalDirection: down<…>
flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;
am I missing something? what should I do to make the ListView scroll?
CodePudding user response：
You don't need a SingleChildScrollView above ListView. Since list view by itself will scroll.
If you wish to keep the SingleChildScrollView please add
physics: const NeverScrollableScrollPhysics(),to the ListView widget.The widget that holds _buildTodoView should have a fixed size. For example if you want it to be full screen add
height:MediaQuery.of(context).size.heightto the parent of _buildTodoView widget.
CodePudding user response：
Try this:
Widget _buildTodoView(BuildContext context) {
return Container(
key: _inputViewKey,
width: MediaQuery.of(context).size.width,//you could change to your liking
height: MediaQuery.of(context).size.height,
child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: c.widgetsList.obs,
),
controller: scrollController,
scrollDirection: Axis.vertical,
padding: const EdgeInsets.all(8),
);
}
CodePudding user response：
Try this
ListView(primary:false)