![見出し画像](https://assets.st-note.com/production/uploads/images/34126720/rectangle_large_type_2_60b0bed4bf45dec6f67dad3de9ae3c92.png?width=1200)
【Flutter】ListTileをタップしたら、下に選択肢が出てくるやつを実装する
main.dartに以下のコードをコピペするだけで使えます。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int selectedNumber = 1;
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: Scaffold(
appBar: AppBar(
title: Text('タップしたら選択肢が出てくる'),
),
body: ExpansionTile(
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('選択している数字'),
Expanded(child: Text('$selectedNumber', textAlign: TextAlign.end,))
],
),
children: buildChoice(),
),
)
);
}
List<Widget> buildChoice() {
List<Widget> _list = [];
for(int i = 1; i <= 10; i++) {
_list.add(
ListTile(
tileColor: (selectedNumber == i) ? Colors.red : null,
title: Text('$i', style: TextStyle(color: (selectedNumber == i) ? Colors.white : null),),
onTap: () {
setState(() {
selectedNumber = i;
});
},
)
);
}
return _list;
}
}
この記事が気に入ったらサポートをしてみませんか?