If we have more items to make them scrollable if the screen of the user device is smaller than the content of the control. In Flutter, the easiest way is to use ListView
Here simple listview example
|
class ListViewWidget extends StatefulWidget { ListViewWidget({Key key}) : super(key: key); @override ListViewWidgetState createState() => ListViewWidgetState(); } class ListViewWidgetState extends State<ListViewWidget> { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( backgroundColor: Colors.pink, title: Text("Listview"), ), body: _getListData(), ), ); } _getListData() { List<Widget> widgets = []; for (int i = 0; i < 100; i++) { widgets.add( Card( margin: EdgeInsets.all(5), child: ListTile( title: Text("Row $i"), leading: Icon(Icons.account_circle), trailing: Icon(Icons.arrow_forward_ios,size: 14,), ), )); } return ListView(children: widgets); } } |
ListTile has the property of onTap() function, with this we can handle the Click events of each child item.
|
onTap: (){ _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text("Clicked on Child $i"))); }, |
The above example shows all static static widgets data. If we want to show dynamic data then we need to use
ListView.Builder()
|
class ListViewWidget extends StatefulWidget { ListViewWidget({Key key}) : super(key: key); @override ListViewWidgetState createState() => ListViewWidgetState(); } class ListViewWidgetState extends State<ListViewWidget> { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( backgroundColor: Colors.pink, title: Text("Listview"), ), body: _getDynamicList(), ), ); } _getDynamicList() { var countries = ['Albania', 'Andorra', 'Armenia', 'Austria', 'Azerbaijan', 'Belarus', 'Belgium', 'Bosnia and Herzegovina', 'Bulgaria', 'Croatia', 'Cyprus', 'Czech Republic', 'Denmark', 'Estonia', 'Finland', 'France', 'Georgia', 'Germany', 'Greece', 'Hungary', 'Iceland', 'Ireland', 'Italy', 'Kazakhstan', 'Kosovo', 'Latvia', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macedonia', 'Malta', 'Moldova', 'Monaco', 'Montenegro', 'Netherlands', 'Norway', 'Poland', 'Portugal', 'Romania', 'Russia', 'San Marino', 'Serbia', 'Slovakia', 'Slovenia', 'Spain', 'Sweden', 'Switzerland', 'Turkey', 'Ukraine', 'United Kingdom', 'Vatican City']; return ListView.builder( itemCount: countries.length, itemBuilder: (ctx,index){ return ListTile( onTap: (){ _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text("Clicked on Country ${countries[index]}"))); }, title: Text(countries[index]), leading: Icon(Icons.flag), trailing: Icon(Icons.arrow_forward_ios,size: 14,), ); }); } } |
|
class ListViewBuilderWidget extends StatefulWidget{ @override State<StatefulWidget> createState() { return new _ListViewBuilderWidget (); } } class _ListViewBuilderWidget extends State<ListViewBuilderWidget>{ @override Widget build(BuildContext context) { return Scaffold( appBar: new AppBar( title: new Text("ListviewBuilder Widget"), ), body: ListView.separated( itemCount: 100, itemBuilder: (BuildContext context, int index) { return ListTile(title: Text(" $index - ", style: TextStyle(color: Colors.blue),)); }, separatorBuilder: (BuildContext context, int index) { return Divider(color: Colors.blue, height: 10,); } ), ); } } |
