홈 앱 구성 위젯
포스트
취소

앱 구성 위젯

게시 2024/01/12 업데이트 2024/01/15
By Sangwon Lee
20 분읽는 시간

MaterialApp

  • 머티리얼 디자인 애플리케이션에 일반적으로 필요한 여러 위젯을 래핑하는 위젯
  • 하위 페이지나 구성요소들을 최상단에서 담는 역할을 한다.
  • 주로 사용하는 속성
    • GlobalKey<NavigatorState>? navigatorKey
      • Navigator를 구축할 때 사용할 키
    • GlobalKey<ScaffoldMessengerState>? scaffoldMessengerKey
      • ScaffoldMessenger 를 빌드할 때 사용할 키
    • Widget? home
      • 앱의 기본 경로에 대한 위젯
    • Map<String, Widget Function(BuildContext)> routes
      • 지정한 경로명과 각 페이지를 연결하는 역할을 한다.
      • 지정한 경로명에 해당하는 페이지의 클래스를 반환하는 형태로 사용된다.
      • 기본 값 : const <String, WidgetBuilder>{}
    • String? initialRoute
      • Navigator가 빌드된 경우 표시할 첫번째 경로명
    • Route<dynamic>? Function(RouteSettings)? onGenerateRoute
      • 앱이 명명된 경로로 탐색될 때 사용되는 경로 생성기 콜백
    • List<Route<dynamic» Function(String)? onGenerateInitialRoutes
      • initialRoute가 제공되는 경우 초기 경로를 생성하는 데 사용되는 경로 생성기 콜백
    • Route<dynamic>? Function(RouteSettings)? onUnknownRoute
      • onGenerateRoute가 initalRoute를 제외하고 경로 생성에 실패할 떄 호출하는 메소드
      • 앱이 오류나 Android 인텐트 등의 이유로 없는 페이지를 호출할 때
        오류 페이지를 반환하는 형태로 사용된다.
    • bool Function(NavigationNotification)? onNavigationNotification
      • NavigationNotification을 수신할 때 사용할 콜백
      • 기본적으로 탐색 상태로 엔진을 업데이트한다.
    • List<NavigatorObserver> navigatorObservers
      • 해당 애플리케이션을 위해 생성된 NavigatorObserver 목록
      • navigatorKey가 변경되면 navigatorObservers는 새로 생성된 NavigatorObserver 목록으로 대체되어야 한다.
      • 기본 값 : const <NavigatorObserver>[]
    • String title
      • 애플리케이션의 제목에 사용될 문자열
      • 기본 값 : ‘’
    • Function(BuildContext)? onGenerateTitle
      • 애플리케이션의 제목에 사용될 문자열을 생성하는 메소드
    • Color? color
      • 기본 색상
    • ThemeData? theme
      • 시스템에서 사용할 사용할 시각적 속성 데이터
    • ThemeData? darkTheme
      • 시스템에서 다크 모드를 요청할 때 사용할 시각적 속성 데이터
    • ThemeMode? themeMode
      • 애플리케이션에서 사용할 테마 선택
      • 기본 값 : ThemeMode.system
    • Locale? locale
      • 해당 앱의 지역 설정
      • 한국은 Locale(‘ko’, ‘KR’) 사용
    • Iterable<Locale> supportedLocales
      • 해당 앱이 서비스되는 지역 목록
      • 기본 값 : const <Locale>[Locale(‘en’, ‘US’)]
    • bool showPerformanceOverlay
      • 성능 오버레이 실행 여부
      • 기본 값 : false
    • bool debugShowCheckedModeBanner
      • 디버그 모드 표시 여부
      • 기본 값 : true
    • ScrollBehavior? scrollBehavior
      • 스크롤 동작 방식
  • 참고

Scaffold

  • 기본 머티리얼 디자인 시각적 레이아웃 구조를 구현한다.
  • 일반적으로 하나의 페이지를 구현할 때 많이 쓰인다.
  • 주로 사용하는 속성
    • PreferredSizeWidget? appBar
      • Scaffold 상단에 표시할 AppBar 위젯 작성
    • Color? backgroundColor
      • 배경색 지정
    • Widget? body
      • 본문이 될 위젯 작성
    • Widget? bottomNavigationBar
      • Scaffold 하단에 표시될 탐색 기능 모음
    • Widget? bottomSheet
      • Scaffold 하단에 표시될 위젯
      • bottomNavigationBar와 함께 쓸 경우 그 위쪽 영역에 그려진다.
    • Widget? drawer
      • body의 측면에 표시되는 패널
      • 모바일 기기에서는 숨겨져 있는 경우가 많다.
      • “좌 → 우” 또는 “우 → 좌”의 방향으로 살짝 드래그하면 나온다.
      • 열려있는 동안 약간 불투명한 색상의 스크림이 나타나서 기본 컨텐츠를 가린다.
    • double? drawerEdgeDragWidth
      • 가로로 드래그하면 열리는 영역의 너비
    • bool drawerEnableOpenDragGesture
      • 모바일에서 드래그하면 drawer를 열 수 있는지에 대한 여부
      • 기본 값 : true
    • void Function(bool)? onDrawerChanged
      • drawer가 열리가나 닫힐 때 동작할 기능
    • Widget? endDrawer
      • body의 측면에 표시되는 패널
      • 모바일 기기에서는 숨겨져 있는 경우가 많다.
      • “우 → 좌” 또는 “좌 → 우”의 방향으로 살짝 드래그하면 나온다.
      • 열려있는 동안 약간 불투명한 색상의 스크림이 나타나서 기본 컨텐츠를 가린다.
    • bool endDrawerEnableOpenDragGesture
      • 모바일에서 드래그하면 endDrawer를 열 수 있는지에 대한 여부
      • 기본 값 : true
    • void Function(bool)? onEndDrawerChanged
      • endDrawer가 열리가나 닫힐 때 동작할 기능
    • DragStartBehavior drawerDragStartBehavior
      • 드래그 시작 동작이 처리되는 방식
      • 기본 값 : DragStartBehavior.start
    • Color? drawerScrimColor
      • drawer가 열려있는 동안 표시되는 스크림 영역의 색상
    • bool extendBody
      • 해당 값이 true이고, BottomNavigationBar 또는 persistFooterButtons가 지정된 경우
      • 기본 값 : false
    • bool extendBodyBehindAppBar
      • Scaffold의 body가 appBar의 영역까지 사용할 수 있는지의 여부
      • true일 경우 body의 일부가 appBar 뒤에 가려진다.
        • 만약에 appBar의 height가 30, body의 height가 100일 경우에는
          실제 화면에서 보이는 건 70만 보인다.
      • 기본 값 : false
    • Widget? floatingActionButton
      • body 오른쪽 하단에 떠 있는 버튼
      • 업로드나 공유하기 같은 기능을 사용할 때 많이 사용된다.
    • FloatingActionButtonAnimator? floatingActionButtonAnimator
      • floatingActionButton을 새로운 floatingActionButtonLocation으로 이동하게 하는 애니메이터
    • FloatingActionButtonLocation? floatingActionButtonLocation
      • floatingActionButton이 어디 위치로 가야할지 지정
    • bool primary
      • 해당 Scaffold가 화면 상단에 표시되는지에 대한 여부
      • true일 경우 appBar의 높이에 디바이스의 상태바 높이가 추가된다.
      • false일 경우 appBar 자체의 높이만큼만 그려진다.
      • 기본 값 : true
    • List<Widget>? persistentFooterButtons
      • Scaffold 하단에 표시될 탐색 기능 모음
    • AlignmentDirectional persistentFooterAlignment
      • OverflowBar 내부의 persistFooterButton 정렬
      • 기본 값 : AlignmentDirectional.centerEnd
    • bool? resizeToAvoidBottomInset
      • true
        • 입력 영역을 선택하여 키보드가 올라올 때 해당 화면의 높이가 달라진다.
        • 오버플로우가 발생할 수도 있다.
      • false
        • 입력 영역을 선택하여 키보드가 올라올 때 해당 화면 위에 얹어져서
          기존 화면에 있는 일부 영역을 키보드 영역의 넓이만큼 가린다.
  • 참고

AppBar

  • 앱 상단에 위치하는 영역
  • 페이지의 제목이나 관련된 추가 기능 등을 포함한다.
  • 주로 사용하는 속성
    • List<Widget>? actions
      • AppBar 상단 우측에 들어갈 위젯 목록
      • 알림 버튼이나 설정 버튼 등 기능이 들어간 위젯을 사용한다.
    • IconThemeData? actionsIconTheme
      • actions에 사용된 아이콘에 대한 스타일
    • Widget? title
      • AppBar 상단 좌측에 들어갈 위젯
      • 해당 페이지의 제목을 나타낼 때 사용한다.
    • double? titleSpacing
      • title의 주변 간격
      • 0.0일 경우 title이 사용 가능한 모든 공간을 차지하게 된다.
    • TextStyle? titleTextStyle
      • title에 사용된 Text의 스타일
    • bool? centerTitle
      • title을 중앙에 배치할지에 대한 여부
      • true일 경우 상단 좌측이 아닌 중앙에 배치된다.
    • Widget? leading
      • AppBar 상단 좌측에 들어갈 위젯 목록
      • title의 왼쪽에 표시된다.
      • 주로 앱의 아이콘을 표시한다.
    • double? leadingWidth
      • leading에 명시된 위젯의 너비
    • bool automaticallyImplyLeading
      • leading의 값이 null일 경우 암시적으로 위젯을 추가할 것인지에 대한 여부
      • false일 경우 뒤로가기 버튼이나 메뉴 버튼같은 것들이 자동으로 생기지 않는다.
      • 기본 값 : true
    • Color? backgroundColor
      • 배경색
    • Color? foregroundColor
      • AppBar의 Text 위젯이나 Icon 위젯의 색상
    • PreferredSizeWidget? bottom
      • AppBar 하단에 들어갈 위젯
      • PreferredSizeWidget을 구현한 위젯만 사용할 수 있다.
      • 일반적으로는 TabBar 위젯을 사용한다.
    • double bottomOpacity
      • bottom 영역의 불투명도
      • 기본 값 : 1.0
    • double? elevation
      • 상위 AppBar를 기준으로 해당 AppBar를 배치할 z 좌표
    • IconThemeData? iconTheme
      • ToolBar에 사용된 아이콘에 대한 스타일
    • bool primary
      • 해당 AppBar가 화면 상단에 표시되는지에 대한 여부
      • 기본 값 : true
    • Color? shadowColor
      • AppBar 아래의 그림자 색상
    • ShapeBorder? shape
      • AppBar의 모양
    • Color? surfaceTintColor
      • elevation을 나타내기 위한 color 위에 오버레이될 색상
    • SystemUiOverlayStyle? systemOverlayStyle
      • 시스템 오버레이에 사용할 스타일 예시 - Android/iOS의 상태 표시줄 - Android의 시스템 탐색 표시줄
    • double? toolbarHeight
      • ToolBar의 높이
    • double toolbarOpacity
      • ToolBar의 불투명도
      • 기본 값 : 1.0
    • TextStyle? toolbarTextStyle
      • ToolBar에 사용된 Text의 스타일
  • 참고

BottomAppBar

  • 앱 하단에 위치하는 영역
  • 특정 페이지에서 관련 기능들을 실행할 때 사용한다.
  • 주로 사용하는 속성
    • Widget? child
      • BottomAppBar 내부에 배치할 위젯
      • 주로 Row 위젯을 많이 사용한다.
    • Color? color
      • 배경색
    • double? elevation
      • 상위 BottomAppBar를 기준으로 해당 AppBar를 배치할 z 좌표
    • NotchedShape? shape
      • BottomAppBar의 모양
    • double? height
      • BottomAppBar의 높이
    • double notchMargin
      • BottomAppBar의 노치와 FloatingActionButton 사이의 여백
      • 기본 값 : 4.0
    • EdgeInsetsGeometry? padding
      • 내부 여백
    • Color? surfaceTintColor
      • elevation을 나타내기 위한 color 위에 오버레이될 색상
    • Color? shadowColor
      • 그림자 색상
  • 참고
BottomAppBar(
      color: Colors.blue,
      child: IconTheme(
        data: IconThemeData(color: Theme.of(context).colorScheme.onPrimary),
        child: Row(
          children: <Widget>[
            IconButton(
              tooltip: 'Open navigation menu',
              icon: const Icon(Icons.menu),
              onPressed: () {
                print("메뉴");
              },
            ),
            IconButton(
              tooltip: 'Search',
              icon: const Icon(Icons.search),
              onPressed: () {
                print("검색");
              },
            ),
            IconButton(
              tooltip: 'Favorite',
              icon: const Icon(Icons.favorite),
              onPressed: () {
                print("좋아요");
              },
            ),
          ],
        ),
      ),
    )

BottomNavigationBar

  • 앱 하단에 위치하는 영역
  • 특정 페이지로 이동하는 경우에 사용한다.
  • 주로 사용하는 속성
    • List<BottomNavigationBarItem> items
      • 각 페이지를 나타내는 위젯 목록
      • 필수
    • int currentIndex
      • items의 항목 중에서 현재 사용 중인 위젯의 인덱스
      • 기본 값 : 0
    • void Function(int)? onTap
      • items의 항목 선택 시 동작할 기능
    • double iconSize
      • 아이콘의 크기
      • 기본 값 : 24.0
    • Color? backgroundColor
      • 배경색
    • Color? selectedItemColor
      • items의 항목 중에서 선택된 항목의 색상
    • Color? unselectedItemColor
      • items의 항목 중에서 선택되지 않은 항목의 색상
    • IconThemeData? selectedIconTheme
      • items의 항목 중에서 선택된 항목의 스타일
    • IconThemeData? unselectedIconTheme
      • items의 항목 중에서 선택되지 않은 항목의 스타일
    • double selectedFontSize
      • items의 항목 중에서 선택된 항목의 글자 크기
      • 기본 값 : 14.0
    • double unselectedFontSize
      • items의 항목 중에서 선택되지 않은 항목의 글자 크기
      • 기본 값 : 12.0
    • bool? showSelectedLabels
      • items의 항목 중에서 선택된 항목에 대한 문구의 노출 여부
    • bool? showUnselectedLabels
      • items의 항목 중에서 선택되지 않은 항목에 대한 문구의 노출 여부
    • TextStyle? selectedLabelStyle
      • items의 항목 중에서 선택된 항목의 TextStyle
    • TextStyle? unselectedLabelStyle
      • items의 항목 중에서 선택되지 않은 항목의 TextStyle
    • Color? fixedColor
      • selectedItemColor의 값
    • double? elevation
      • BottomNavigationBar의 z 좌표
    • bool? enableFeedback
      • 감지된 제스처가 음향/촉각 피드백을 제공해야 하는지에 대한 여부
  • 참고
//s:선언부
int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
    Text(
        'Index 0: Home',
        style: optionStyle,
    ),
    Text(
        'Index 1: Business',
        style: optionStyle,
    ),
    Text(
        'Index 2: School',
        style: optionStyle,
    ),
];

void _onItemTapped(int index) {
    setState(() {
        _selectedIndex = index;
    });
}
//e:선언부

//s:build
Scaffold(
    appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
    ),
    body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
    ),
    bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'Home',
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.business),
                label: 'Business',
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.school),
                label: 'School',
            ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
    ),
)
//e:build

Drawer

  • Scaffold의 측면에서 나오는 메뉴 패널
  • 주로 사용하는 속성
    • Widget? child
      • 내부에 배치할 위젯을 지정한다.
      • Column/ListView/Wrap 등을 사용한다.
    • double? width
      • 메뉴 패널의 너비
    • Color? backgroundColor
      • 배경색
    • double? elevation
      • 상위 Drawer를 기준으로 해당 Drawer를 배치할 z 좌표
    • Color? shadowColor
      • elevation에 대한 그림자 색상
    • Color? surfaceTintColor
      • elevation을 나타내기 위한 color 위에 오버레이될 색상
    • ShapeBorder? shape
      • Drawer의 모양
  • 참고
  • BottomNavigationBar의 Material 3 버전
  • 주로 사용하는 속성
    • List<Widget> destinations
      • 각 페이지를 나타내는 위젯 목록
      • 필수
    • int selectedIndex
      • destinations의 항목 중에서 현재 사용 중인 위젯의 인덱스
      • 기본 값 : 0
    • double? height
      • NavigationBar의 높이
    • Function(int)? onDestinationSelected
      • destinations의 항목 선택 시 동작할 기능
    • Color? backgroundColor
      • 배경색
    • double? elevation
      • 상위 NavigationBar를 기준으로 해당 NavigationBar를 배치할 z 좌표
    • Color? shadowColor
      • elevation에 대한 그림자 색상
    • Color? surfaceTintColor
      • elevation을 나타내기 위한 color 위에 오버레이될 색상
    • Color? indicatorColor
      • destinations의 항목 선택 시 나타나는 주변 영역의 색상
    • ShapeBorder? indicatorShape
      • destinations의 항목 선택 시 나타나는 주변 영역의 모양
    • Duration? animationDuration
      • 애니메이션 전환되는 기간
      • shape, elevation, shadowColor, surfaceTintColor 및 고도 오버레이가 적용된 경우에 동작한다.
    • NavigationDestinationLabelBehavior? labelBehavior
  • 참고
  • 사이드 네비게이션 메뉴
  • BottomNavigationBar나 NavigationBar는
    화면이 넓을 경우 각 항목이 필요 이상의 영역을 차지하기 떄문데 그런 경우에는 NavigationRail을 사용하는 것이 좋다.
  • 주로 사용하는 속성
    • List<NavigationRailDestination> destinations
      • 내부에 배치될 NavigationRailDestination 위젯 목록
      • 필수
    • int? selectedIndex
      • destinations 중에서 현재 선택된 NavigationRailDestination 위젯의 인덱스 번호
      • 필수
    • Function(int)? onDestinationSelected
      • destinations의 위젯 선택 시 동작할 기능
    • Color? backgroundColor
      • 배경색
    • Widget? leading
      • destinations 상단에 배치될 위젯
    • Widget? trailing
      • destinations 하단에 배치될 위젯
    • double? elevation
      • 상위 NavigationRail를 기준으로 해당 NavigationRail를 배치할 z 좌표
    • double? groupAlignment
      • destinations이 NavigationRail 내에서 정렬되는 위치
      • 허용 범위
        • -1.0 ~ 1.0
      • -1.0일 경우 항목이 위쪽에 정렬된다.
      • 0.0일 경우 항목이 중앙에 정렬된다.
      • 1.0일 경우 아래쪽에 정렬된다.
    • NavigationRailLabelType? labelType
      • 각 항목의 라벨을 표시하는 유형
      • 종류
        • NavigationRailLabelType.all
          • 모든 라벨이 항상 표시되어 있다.
        • NavigationRailLabelType.selected
          • 선택된 항목만 라벨이 표시되어 있다.
        • NavigationRailLabelType.none
          • 모든 라벨이 항상 표시되어 있지 않다.
      • 기본 값 : NavigationRailLabelType.none
    • TextStyle? selectedLabelTextStyle
      • 선택된 항목의 라벨의 Text 스타일
    • TextStyle? unselectedLabelTextStyle
      • 선택되지 않은 항목의 라벨의 Text 스타일
    • IconThemeData? selectedIconTheme
      • 선택된 항목의 라벨의 Icon 스타일
    • IconThemeData? unselectedIconTheme
      • 선택되지 않은 항목의 라벨의 Icon 스타일
    • double? minWidth
      • 최소 너비
    • double? minExtendedWidth
      • extended가 true일 경우 애니메이션이 완료될 때까지의 너비
    • bool extended
      • 남는 여백을 NavigationRail이 차지할 것인지에 대한 여부
      • labelType이 NavigationRailLabelType.none일 때만 사용가능하다.
      • true일 경우 NavigationRail이 남는 여백을 차지하며, 각 항목의 라벨이 사이드에 배치된다.
      • 기본 값 : false
    • bool? useIndicator
      • true일 경우 선택한 항목의 아이콘 뒤에 둥근 NavigationIndicator를 추가한다. (둥근 모양의 강조 영역)
      • 기본 값 : true
    • Color? indicatorColor
      • NavigationIndicator의 색상
    • ShapeBorder? indicatorShape
      • NavigationIndicator의 모양
  • 참고
int _selectedIndex = 0;
NavigationRailLabelType labelType = NavigationRailLabelType.none;
bool showLeading = false;
bool showTrailing = false;
double groupAlignment = -1.0;

Row(
    children: [
        NavigationRail(
            extended: true,
            selectedIndex: _selectedIndex,
            groupAlignment: groupAlignment,
            onDestinationSelected: (int index) {
                setState(() {
                    _selectedIndex = index;
                });
            },
            labelType: labelType,
            leading: showLeading
                ? FloatingActionButton(
                    elevation: 0,
                    onPressed: () {},
                    child: const Icon(Icons.add),
                )
                : const SizedBox(),
            trailing: showTrailing
                ? IconButton(
                onPressed: () {},
                    icon: const Icon(Icons.more_horiz_rounded),
                )
                : const SizedBox(),
            destinations: const <NavigationRailDestination>[
                NavigationRailDestination(
                    icon: Icon(Icons.favorite_border),
                    selectedIcon: Icon(Icons.favorite),
                    label: Text('First'),
                ),
                NavigationRailDestination(
                    icon: Badge(child: Icon(Icons.bookmark_border)),
                    selectedIcon: Badge(child: Icon(Icons.book)),
                    label: Text('Second'),
                ),
                NavigationRailDestination(
                    icon: Badge(
                        label: Text('7'),
                        child: Icon(Icons.star_border),
                    ),
                    selectedIcon: Badge(
                        label: Text('7'),
                        child: Icon(Icons.star),
                    ),
                    label: Text('Third'),
                ),
            ],
        ),
        const VerticalDivider(thickness: 1, width: 1),
        Container(color: Colors.blue, width: 200,)
    ],
)
Flutter
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.
최근 업데이트
바로가기