![見出し画像](https://assets.st-note.com/production/uploads/images/93681064/rectangle_large_type_2_5ddb3e0316ad3258d903b2de6aaf4cfd.png?width=1200)
FlutterでTabメニューを作った一例
みなさんも使えると思ったので、共有です。
現在ニュースアプリを作成しているのですが、そのときに使ったタブメニューの一例を貼っておきます!よかったら使ってください!
①スクロール可能なのでタブに余裕がある
②タブが増えてもlengthの長さを変えなくて良い
③List化されていて見やすい
などにこだわりました!
<importやstfなど省略>
class _NewsPageState extends State<NewsPage> {
List<Tab> tabs = [
Tab(child: Text('最新', style: newsPageCustomFonts01)),
Tab(child: Text('政治', style: newsPageCustomFonts01)),
Tab(child: Text('スポーツ', style: newsPageCustomFonts01)),
Tab(child: Text('社会', style: newsPageCustomFonts01)),
Tab(child: Text('災害', style: newsPageCustomFonts01)),
Tab(child: Text('国際', style: newsPageCustomFonts01)),
];
List<Widget> tabsContent = [
Container(color: Colors.blue),
Container(color: Colors.yellow),
Container(color: Colors.grey),
Container(color: Colors.greenAccent),
Container(color: Colors.orange),
Container(color: Colors.black),
];
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: tabs.length,
child: Scaffold(
appBar: AppBar(
title: Text('newsPage', style: titleText),
backgroundColor: Colors.orange,
bottom: PreferredSize(
preferredSize: Size.fromHeight(30),
child: TabBar(
isScrollable: true,
indicatorColor: Colors.blue,
tabs: tabs,
),
),
),
body: TabBarView(
children: tabsContent,
),
),
);
}
}
個人的には、JSONからニュースのデータを取得する練習は天気予報のときにできたので、あえてニュースアプリはwebスクレイピングで実施したいと思います!
日々、自分磨き!ではまた!
この記事が気に入ったらサポートをしてみませんか?