Flutterでリストビュー(ListView)使ってみる
これを参考にやってみました。
https://github.com/nisrulz/flutter-examples/tree/master/using_listview — github.com
https://github.com/edo1z/flutter_study/tree/e1f71f32569e7f4bdf45d4b60c5b2a5935994f57 — github.com

lib/pages/menu_list.dart
import 'package:flutter/material.dart';import 'package:hoge/menu_list/menu_list.dart';import 'package:hoge/menu_list/model/menu.dart';
class MenuListScreen extends StatelessWidget { _buildMenuList() { return <MenuModel>[ const MenuModel(type: 'FOOD', name: '焼きそば', price: 400), const MenuModel(type: 'FOOD', name: 'たこ焼き', price: 500), const MenuModel(type: 'DRINK', name: '生ビール', price: 400), const MenuModel(type: 'DRINK', name: 'ウーロン茶', price: 150), ]; }
@override Widget build(BuildContext context) { return Scaffold(body: MenuList(_buildMenuList())); }}lib/menu_list/menu_list.dart
import 'package:flutter/material.dart';import 'package:hoge/menu_list/menu_list_item.dart';import 'package:hoge/menu_list/model/menu.dart';
class MenuList extends StatelessWidget { final List<MenuModel> _menuModel;
MenuList(this._menuModel);
@override Widget build(BuildContext context) { return ListView( padding: EdgeInsets.symmetric(vertical: 8.0), children: _buildMenuList(), ); }
List<MenuListItem> _buildMenuList() { return _menuModel .map((menu) => MenuListItem(menu)) .toList(); }}lib/menu_list/menu_list_item.dart
import 'package:flutter/material.dart';import 'package:hoge/menu_list/model/menu.dart';
class MenuListItem extends StatelessWidget { final MenuModel _menuModel;
MenuListItem(this._menuModel);
@override Widget build(BuildContext context) { return ListTile( leading: CircleAvatar(child: Text(_menuModel.name[0])), title: Text(_menuModel.name), subtitle: Text(_menuModel.type)); }}lib/menu_list/model/menu.dart
class MenuModel { final String type; final String name; final int price;
const MenuModel({this.type, this.name, this.price});}