【Flutter】よく使うテンプレート widget など

2022年4月15日

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を調整
)

Flutter

Posted by Next-k