【Flutter】DrawerHeaderの高さ・Drawerの横幅を調整

今回はDrawerHeaderの高さ、Drawerの横幅を調整する方法を紹介します。

DrawerHeaderの高さを調整するには余白調整とSizedBoxを使用し、Drawerの横幅にはwidthを使用します。

\ 世界最大級のオンライン学習サービス /

目次

DrawerHeaderの高さを調整

SizedBox(
  height: 50,
  child: DrawerHeader(
    margin: EdgeInsets.symmetric(vertical: 0, horizontal: 20),
    padding: EdgeInsets.zero,
    child: Text(
      'Menu',
      style: TextStyle(fontSize: 30),
    ),
  ),
),

DrawerHeaderはデフォルトでmarginpaddingで余白調整されているので、y軸の余白をゼロにしSizedBoxで高さを調整します。

調整後

デフォルト

Drawerの横幅を調整

Drawer(
  width: 250,
  ...
),

Drawerの横幅はwidthで調整します。

調整後

デフォルト

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CustomApp(),
    );
  }
}

class CustomApp extends StatefulWidget {
  const CustomApp({Key? key}) : super(key: key);

  @override
  State<CustomApp> createState() => _CustomAppState();
}

class _CustomAppState extends State<CustomApp> {
  var text = 'Home';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('FlutterZero')),
drawer: Drawer(
  width: 250,
        child: ListView(
          children: [
            SizedBox(
              height: 50,
              child: DrawerHeader(
                margin: EdgeInsets.symmetric(vertical: 0, horizontal: 20),
                padding: EdgeInsets.zero,
                child: Text(
                  'Menu',
                  style: TextStyle(fontSize: 30),
                ),
              ),
            ),
            ListTile(
              leading: Icon(Icons.home),
              title: Text('Home'),
              onTap: () => Navigator.pop(context),
            ),
            ListTile(
              leading: Icon(Icons.message),
              title: Text('Messages'),
              onTap: () => setState(() {
                text = 'Messages';
                Navigator.pop(context);
              }),
            ),
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text('Profile'),
              onTap: () => setState(() {
                text = 'Profile';
                Navigator.pop(context);
              }),
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
              onTap: () => setState(() {
                text = 'Settings';
                Navigator.pop(context);
              }),
            ),
          ],
        ),
      ),
      body: Center(
        child: Text(
          text,
          style: TextStyle(fontSize: 30),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次