Flutter Listview | RRTutors

Flutter Listview

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);

  }

 

How will we handle the item click events?

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")));

          },

Flutter Listview Events


 

Dynamic ListView

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,),

      );

    });

  }

 }

Flutter Listview

Listview.separated

 

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,);

         }

     ),

   );

 }

 

}

Advertisements