Hello guys, We have discussed basic list implementation of flutter in one of our previous. Here we will implement an example of how to create a dynamic listview in flutter application. Unlike the basic list implementation we will use a listview builder in this example. So that you will get an idea of how to input items to listview dynamically in flutter.
Contents
- Learn code for implementing listview.
- Set up the data
- Implement the listview in class
Learn code for implementing listview
First step is to learn what set of code is used to build a listview in flutter. Following is the which has to be add to build a listview in flutter. You can specify the item count will decide the number of items in the listview and you can return a card in itemBuilder. Full code will be provided in the third step.
body: new ListView.builder( itemCount: inputs.length, itemBuilder: (BuildContext context, int index){ return new Card( child: new Container( padding: new EdgeInsets.all(20.0), child: new Column( children: <Widget>[ Align( alignment: Alignment.centerLeft, child: Container( child: Text( "${inputs[index]}", ), ), ), ], ), ), ); } ),
Set up the data
In this step we will set up the data which has to be added in the listivew. Here i am planing to display just a text in listview. So we will create a string list. And we will add data to list in initstate function.
List<String> inputs = new List<String>(); @override void initState() { // TODO: implement initState setState(() { for(int i=0;i<20;i++){ inputs.add("Name ${i}"); } }); }
Implement the listview in the class (Complete code)
In this step we will put the pieces together to get a listview.Following is the complete code of the main.dart file which is used for implementing this example. After implementation you will get the output displayed above.
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Listview', theme: ThemeData( primarySwatch: Colors.green, ), home: MyHomePage(title: 'Flutter Listview'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override FlutterListview createState() => FlutterListview(); } class FlutterListview extends State<MyHomePage> { List<String> inputs = new List<String>(); @override void initState() { // TODO: implement initState setState(() { for(int i=0;i<20;i++){ inputs.add("Name ${i}"); } }); } @override Widget build(BuildContext context) { // TODO: implement build return new Scaffold( appBar: new AppBar( title: new Text('Listview'), ), body: new ListView.builder( itemCount: inputs.length, itemBuilder: (BuildContext context, int index){ return new Card( child: new Container( padding: new EdgeInsets.all(20.0), child: new Column( children: <Widget>[ Align( alignment: Alignment.centerLeft, child: Container( child: Text( "${inputs[index]}", ), ), ), ], ), ), ); } ), ); } }