Flutterの練習9−2：ListView（その２）
実際、ListViewを使うときは、Listから展開することが多いと思います。そういう時は、ListView.builderを使います。できたのはこちら。
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
String _label = 'Nothing Clicked!';
void _setLabel(int index) {
setState(() {
_label = 'Clicked item $index';
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text("ListView 2"),
),
body: Row(
children: [
SizedBox(
width: 150, // リストの幅
child: Scrollbar(
thumbVisibility: true, // スクロールバーを常に表示
child: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(
title: Text('item $index'),
onTap: () => _setLabel(index),
);
},
),
),
),
Expanded(
child: Center(
child: Text(
_label,
style: TextStyle(fontSize: 18),
),
),
),
],
),
);
}
}