Flutter - ListView, ListTile 위젯

• ListView , ListWidget이란?

->ListView와 ListTile은 같이 사용하여 사이드 메뉴 리스트를 추가할수있다.

ListView

-리스트를 표시하는 위젯

-ListTile 위젯과 함께 사용하면 편리함.

-scrollDirection: 스크롤 방향

-children : 목록 내용들

ListTile

-leading,title,subtitle,traling 프로퍼티를 사용하여 왼쪽,중앙,오른쪽 에 손쉽게 아이콘이나 글자를 배치 할수있다.

-onTap 프로퍼티를 사용하여 탭 했을때 동작 지정 가능

 

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // This method is rerun every time setState is called, for instance as done
        // by the _incrementCounter method above.
        //
        // The Flutter framework has been optimized to make rerunning build methods
        // fast, so that you can just rebuild anything that needs updating rather
        // than having to individually change instances of widgets.
        home: Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: const Text("제목"),
      ),
      body: ListView(
        scrollDirection: Axis.vertical,
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.home),
            title: Text("홈"),
            trailing: Icon(Icons.navigate_next),
            onTap: () {},
          ),
          ListTile(
            leading: Icon(Icons.info),
            title: Text("정보"),
            trailing: Icon(Icons.navigate_next),
            onTap: () {},
          ),
          ListTile(
            leading: Icon(Icons.person),
            title: Text("마이페이지"),
            subtitle: Text("로그인 후 이용해주세요."),
            trailing: Icon(Icons.navigate_next),
            onTap: () {},
          )
        ],
      ),
    ));
  }
}