Flutter (9) 썸네일형 리스트형 UserAccountsDrawerHeader, Drawer에 사용자의 정보를 담는법 앞서 우리는 Drawer를 구현해봤다.https://standout.tistory.com/1616 Drawer 삽입하기(feat. endDrawer, automaticallyImplyLeading)DrawerFlutter에서 제공하는 위젯앱의 측면에서 슬라이딩으로 나타나는 네비게이션 메뉴 안에 메뉴리스트들은 ListView와 같은 스크롤가능한 리스트로 보통 구현된다. AppBar의 leading속성에 IconBustandout.tistory.com 예시코드를 살펴보자.UserAccountsDrawerHeader 설정으로 사용자 계정정보를 표시하는데 이때이름, 이메일 및 프로필 이미지를 표시하는데 유용함을 확인 할 수 있다.UserAccountsDrawerHeader( acc.. Drawer 삽입하기(feat. endDrawer, automaticallyImplyLeading) DrawerFlutter에서 제공하는 위젯앱의 측면에서 슬라이딩으로 나타나는 네비게이션 메뉴 안에 메뉴리스트들은 ListView와 같은 스크롤가능한 리스트로 보통 구현된다. AppBar의 leading속성에 IconButton를 추가해 Drawer를 열도록 보통 설정한다 endDrawer 속성을 사용하면 오른쪽으로 열리도록 지정 할 수 도 있다.class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Drawer Example'), .. leading과 actions leading과 actionsAppBar위젯에서 사용되는 속성애플리케이션의 상단바에 표시되는 요소를 배치하는데 사용됨 leading: 왼쪽, 뒤로가기 버튼 등 (A)actions: 오른쪽, 여러위젯을 지정하는 속성 (C, D) appBar: AppBar( title: Text('Flutter AppBar Example'), leading: IconButton( icon: Icon(Icons.menu), onPressed: () { // Menu button action print('Menu button pressed'); }, ), ac.. Flutter의 Widget: 위젯트리와 루트위젯, 구성위젯과 컨테이너 위젯 상태 Stateful 위젯과 비상태 Stateless 위젯 앞서 위젯에 대해 알아봤다.https://standout.tistory.com/1612 위젯 Widget 이란?위젯 Widget 이란?컴퓨팅 및 모바일 디바이스에서 사용되는 작은 애플리케이션 또는 인터페이스 요소모바일, 데스크톱, 웹, UI 유형의 위젯들이 있으며위젯은 실시간 정보, 사용자정의(사용자가standout.tistory.com 그렇다면 Flutter에서의 위젯은 무엇일까모든 기본단위 요소, 모든것위젯은 앱의 UI를 만드고 구성한다. 이 위젯은 한번 생성된 위젯은 변경되지않는다는 불변성의 특징을 가진다. 루트 위젯과 위젯트리MaterialApp , CupertinoApp...Flutter에서는 여러 위젯이 계층적으로 배치된 트리 구조로 구성되며트리의 최상위 에 있는 위젯을 루트 위젯이라 부른.. Flutter dart 수평/수직 구분선 - Divider VerticalDivider Divider 수평 구분선color 선 색상thickness 선 두께indent 선 왼쪽 끝에서 시작하는 간격, 기본값 0.0endIndent 선 오른쪽 끝에서 시작하는 간격, 기본값 0.0height 선 높이, 기본값 16.0Divider( color: Colors.blue, // 색상 변경 thickness: 2.0, // 두께 변경 indent: 20.0, // 왼쪽 여백 endIndent: 20.0, // 오른쪽 여백 height: 30.0, // 높이 설정 ), VerticalDivider 수직 구분선, Row와 같은 수평방향 위젯에서 열 사이에 구분선을 추가.. Flutter dart CircleAvatar 원형을 생성하는 위젯 CircleAvatar 원형을 생성하는 위젯backgroundColor 배경색상backgroundImage 위젯의 배경이미지 (NetworkImage, AssetImage, FileImage)radius 반지름 기본값은 20.0CircleAvatar( backgroundColor: Colors.grey, backgroundImage: AssetImage('assets/profile.png'), radius: 40.0,)child 위젯안에 배치할 위젯 (텍스트, 아이콘..)CircleAvatar( backgroundColor: Colors.blue, child: Text( 'AB', style: TextStyle(color: Colors.white), ), radius: 30.0,).. Flutter dart 정렬하기 - MainAxisAlignment CrossAxisAlignment MainAxisAlignment 축에 따른 정렬 MainAxisAlignment.start 주축의 시작부분에 정렬 - row는 왼쪽, column는 위쪽 정렬Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Text('One'), Text('Two'), Text('Three'), ],) CrossAxisAlignment.start 교차축의 시작부분에 정렬 - row는 위쪽, column은 왼쪽 정렬Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container(color: Colors.red, width: 50, height: 100), Co.. Flutter dart 패딩 적용하기 - Padding EdgeInsets Padding 위젯 모든 방향에 동일한 패딩Padding( padding: EdgeInsets.all(16.0), // 모든 방향에 16픽셀의 패딩을 설정 child: Text('Hello, Flutter!'),) 수직과 수평에 다른 패딩Padding( padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0), child: Text('Hello, Flutter!'),) 개별적 패딩Padding( padding: EdgeInsets.only(left: 15.0, top: 10.0, right: 5.0), child: Text('Hello, Flutter!'),) 개별적 메서드 패딩padding: EdgeInsets.fromLTRB(2.. 이전 1 2 다음
