Flutter listview Code Example

Last Updated On Thursday 2nd Jun 2022
  • ListView. It is a very common control on the mobile terminal and is inseparable from most display scenes ListView.
  • In the Fluttermiddle of the ListView package is also very good, with a few simple lines of code to meet the needs of our layout, a scrolling list.
	ListView({
    /// key
    Key key,
     /// Layout direction
    Axis scrollDirection =  Axis.vertical,
     /// Whether to display in reverse order
    bool reverse =  false,
     /// ScrollController is used to control the scroll position and listen to scroll events
    ScrollController controller,
     /// Whether to use the default controller
    bool primary,
     /// The scrolling effect can be set by this parameter, ListView is not scrollable
    ScrollPhysics physics,
     /// Whether to set the length of the ListView according to the total length of the child controls, the default value is false
    bool shrinkWrap = false,
    ///  padding
    EdgeInsetsGeometry padding,
     /// Height of child control
    this.itemExtent,
     // Whether to release child controls when closing the screen 
    bool addAutomaticKeepAlives =  true ,
     /// Whether to avoid redrawing of list items
    bool addRepaintBoundaries =  true ,
     /// This attribute indicates whether to wrap child controls in IndexedSemantics to provide accessibility semantics
    bool addSemanticIndexes =  true ,
     // the number of preloaded child controls 
    double cacheExtent,
     /// child control array
    List<Widget>children =  const<Widget>[],
     /// The number of child controls
    int semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
})
	
  • ListView supports a lot of properties for design, as mentioned above
	ListView(
  children: <Widget>[
    ListTile(...)
  ]
);
	
  • To use the List UI on the Flutter ListView, ListTile, you should use the widget.
	Scaffold(
  appBar: AppBar(title: Text(title)),
  body: ListView(
    children: <Widget>[
      ListTile(
        title: Text('Articles'),
      ),
      ListTile (
        title: Text('Tags'),
      ),
      ListTile (
        title: Text('Settings'),
      )
    ]
  )
)