플러터(Flutter) 메뉴 만들기 -2 : ListView / ListTitle

사이드 메뉴

 

ListView 와 ListTile 을 사용하여 사이드 메뉴 리스트를 추가했습니다.

ListView 는 항목들을 행으로 나열합니다.

ListTile 은 각 항목에 대한 열의 항목들(아이콘, 텍스트 등)을 나열합니다.

child: ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(
        Icons.home,
        color: Colors.grey[850],
      ),                
      title: Text('홈'),
      onTap: () { 
        print('Home pressed')
      },
    ),
    ListTile(
      leading: Icon(
        Icons.image,
        color: Colors.grey[850],
      ),                
      title: Text('사진보기'),
      onTap: () { },
      trailing: Icon(Icons.arrow_forward_ios),
    ),
    ListTile(
      leading: Icon(
        Icons.border_color,
        color: Colors.grey[850],
      ),                
      title: Text('글쓰기'),
      onTap: () { },
      trailing: Icon(Icons.arrow_forward_ios),
    )
  ]
)

 

leading 은 아이콘, title 은 텍스트, onTap 은 항목을 눌렀을 때의 수행할 코드를 지정합니다.

ListTile(
  leading: Icon(
    Icons.home,
    color: Colors.grey[850],
  ),                
  title: Text('홈'),
  onTap: () {
    print('Home pressed')
  },
)

 

전체 코드는 다음과 같습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '플러터 메뉴 만들기',
      theme: ThemeData(
        primarySwatch: Colors.lightGreen,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('플러터 메뉴 만들기'),
          centerTitle: true,
          elevation: 0.0,

          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search), 
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.more_vert), 
              onPressed: () {},
            )
          ],
        ),
        drawer: Drawer(
          child: ListView(
            children: <Widget>[
              ListTile(
                leading: Icon(
                  Icons.home,
                  color: Colors.grey[850],
                ),                
                title: Text('홈'),
                onTap: () { 
                  print('Home pressed')
                },
              ),
              ListTile(
                leading: Icon(
                  Icons.image,
                  color: Colors.grey[850],
                ),                
                title: Text('사진보기'),
                onTap: () { },
                trailing: Icon(Icons.arrow_forward_ios),
              ),
              ListTile(
                leading: Icon(
                  Icons.border_color,
                  color: Colors.grey[850],
                ),                
                title: Text('글쓰기'),
                onTap: () { },
                trailing: Icon(Icons.arrow_forward_ios),
              )
            ],
          ),

        ),
      )
    );
  }
}