【Flutter】よく使うテンプレート widget など
StatefulWidget
class StatefulWidgetSample extends StatefulWidget {
final String title;
const StatefulWidgetSample({Key? key,required this.title,}) : super(key: key);
@override
_StatefulWidgetSampleState createState() => _StatefulWidgetSampleState();
}
class _StatefulWidgetSampleState extends State<StatefulWidgetSample> {
@override
Widget build(BuildContext context) {
return Text(widget.title);
}
}
widget.title のようにするとデータ取得できる。
StatelessWidget
class StatelessWidgetSample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text("");
}
}
FutureBuilde
FutureBuilder<String>(
future: getProfileName(),
builder:
(BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data);
} else if (snapshot.hasError) {
return Text("error");
} else {
return const Text("");
}
}),
隠せるWidget
Visibility(
visible: isVisible,
child: const Text('Visibilityテスト'),
),
フッターによる画面遷移
class Main extends StatefulWidget {
const Main({Key? key}) : super(key: key);
@override
_Main createState() => _Main();
}
class _Main extends State {
int _selectedIndex = 0;
static final List<Widget> _screens = [
const TopPage(),
const InfoPage(),
const RoomPage(),
const ProfilePage(),
];
void _onItemTapped(int index) async {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('プロフィール')),
body: _screens[_selectedIndex],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'ホーム',
),
BottomNavigationBarItem(
icon: Icon(Icons.info),
label: 'インフォメーション',
),
BottomNavigationBarItem(
icon: Icon(Icons.chat),
label: 'チャット',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'プロフィール',
),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
));
}
}
フッターを4個以上にする場合
type: BottomNavigationBarType.fixed,
このコードを入れないとうまく表示されない
Text
child: Text(
'Test',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Theme.of(context).primaryColor,
),
),
Chip
スマートにするには少し調整が必要
Chip(
backgroundColor: Colors.green[50],
label: Text(tag,
style: TextStyle(
fontSize: 11,
color: Colors.green[800],
fontWeight: FontWeight.bold
)
),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, // 追加:上下の余計なmarginを削除
labelPadding: EdgeInsets.symmetric(horizontal: 1), // 追加:左右のpaddingを調整
visualDensity: VisualDensity(horizontal: 0.0, vertical: -4), // 追加:paddingを調整
)
ディスカッション
コメント一覧
まだ、コメントがありません