ListView

Import 'package:flutter/material.dart';

void main() {
  runApp(SampleApp());
}

class SampleApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  SampleAppPage({Key key}) : super(key: key);

  @override
  _SampleAppPageState createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample App"),
      ),
      body: ListView(children: _getListData()),
    );
  }

  _getListData() {
    List<Widget> widgets = [];
    for (int i = 0; i < 100; i++) {
      widgets.add(Padding(padding: EdgeInsets.all(10.0), child: Text("Row $i")));
    }
    return widgets;
  }
}
  • In an Android ListView, you create an adapter and pass it into the ListView, which renders each row with what your adapter returns.
  • Due to Flutter’s immutable widget pattern, you pass a list of widgets to your ListView, and Flutter takes care of making sure that scrolling is fast and smooth.
  • In Android, the ListView has a method to find out which item was clicked, ‘onItemClickListener’.
  • In Flutter, use the touch handling provided by the passed-in widgets.
  • If you were to update the list of widgets inside a setState(), you would quickly see that your data did not change visually. This is because when setState() is called, the Flutter rendering engine looks at the widget tree to see if anything has changed. When it gets to your ListView, it performs a == check, and determines that the two ListViews are the same. Nothing has changed, so no update is required.
  • For a simple way to update your ListView, create a new List inside of setState(), and copy the data from the old list to the new list.
  • The recommended, efficient, and effective way to build a list uses a ListView.Builder.
  • Finally, but most importantly, notice that the onTap() function doesn’t recreate the list anymore, but instead .adds to it.

ListView — Structure map

Clickable & Draggable!

ListView — Related pages: