본문 바로가기
반응형

Mobile Develop/Flutter20

[Flutter] BottomNavigationBar Icon 대신 Text Label만 보여주기 하단 bottomNavigation에 텍스트만 들어가야하는 경우 icon은 필수 입력값이므로 없애거나 null을 줄 수 없다. 방법 1) label을 빈값으로 처리하고, 대신 Text를 Icon처럼 넘겨서 처리 fontSize는 0으로 BottomNavigationBar( selectedFontSize: 0, unselectedFontSize: 0, items : [ BottomNavigationBarItem( icon: Text(title), activeIcon: Text(title), label: "") ] ) 방법 2) icon을 빈 공백으로 세팅 선택/미선택된 텍스트 컬러는 itemColor로 처리 BottomNavigationBar( selectedItemColor : Colors.amber, .. 2024. 1. 19.
[Flutter] Align 위젯 Align 자식 위젯을 원하는 방향으로 정리하고 싶을 때 Align 위젯을 사용하여 정렬할 수 있다. 다른 위젯과 마찬가지로, 자식 위젯을 Align으로 감싼 뒤 alignment 프로퍼티를 이용하여 방향을 설정해주면 된다. Align( alignment: Alignment.bottomCenter,//정렬하고자하는 위치 설정 child:Container( //자식 위젯 코드 생략 ) ) Alignment Alignment 상수는 두 가지 방법으로 설정할 수 있는데, 첫 번째는 Alignment(double x, double y) 함수를 이용하여 직접 위치를 지정해주는 것이고, 두 번째는 미리 정의된 상수 이름을 사용하여 위치를 지정해주는 방법이다. 1. 값 직접 설정 Alignment()를 사용하여 함수.. 2022. 3. 18.
[Flutter] Padding 위젯 padding padding 위젯은 안쪽 여백을 표현할 때 사용하는 위젯이며, 아래와 같이 생성한다. Padding( padding: const EdgeInsets.all(10.0),// 이 부분에서 padding 값 지정 child:Container( //child 코드 생략 ) ) 여백은 EdgeInsets 클래스를 사용하여 값을 지정할 수 있으며, 이 클래스에는 여러가지 함수가 제공된다. EdgeInsets 함수 설명 all 네 방향 모두 같은 값 지정 only 상하좌우 중 원하는 방향에만 값 지정 (지정하지 않은 방향에는 기본값 0.0) fromLTRB 네 방향의 값을 각각 지정 symmetric 상하(vertical)와 좌우(horizontal) 값 지정 all all은 네 방향에 모두 값은 값.. 2022. 3. 18.
[Flutter] Center 위젯 Center 중앙으로 정렬 시키고 싶을 때는 center 라는 위젯을 사용하여 정렬 시킬 수 있다. 예를 들어 아래와 같은 코드를 정렬시키고 싶다면, 그냥 그대로 Center로 감싸면 된다. [정렬 전] Container( color: Colors.red, width: 100, height: 100 ) [가운데 정렬 후] Center( child:Container( color: Colors.red, width: 100, height: 100 ) ) 코드 변경 후 가운데로 정렬이 잘 되는 것을 확인 할 수 있다. [정렬 전/후 실행 결과] 2022. 3. 18.
[Flutter] GridView 위젯 GridView 플러터의 GridView는 열 수를 지정하여 자식 위젯을 그리드 형태로 표시하는 위젯이다. 동일한 크기의 표를 그리는 것과 유사한데, 열 수만 지정해주면 해당 수만큼 위젯의 공간을 나누어 각 하나의 공간을 하나의 자식에 부여하는 것이다. 세로가 행, 가로가 열이므로 가로 기준에 맞춰 배치한다고 생각하면 된다. 코드는 아래와 같이 작성하여 사용한다. GridView.count() 생성자를 사용하여 위젯을 그리고 있으며, crossAxisCount 프로퍼티를 사용하여 열 수를 지정한다. GridView.count( crossAxisCount : 3,// 이 부분에 열 수 지정 children: [ //자식 위젯 코드 생략 ] ) 이때 주의해야할 점은 일정한 공간을 열 수에 맞춰 동일한 비율의.. 2022. 3. 17.
[Flutter] Stack 위젯 Stack stack은 가장 먼저 들어온 객체가 가장 아래에 쌓이는 구조이다. stack 위젯 역시 children에 나열한 여러 위젯을 순서대로 겹치게 한다. children 프로퍼티에 정의한 순서대로 쌓이기 때문에, 가장 먼저 정의한 자식 위젯이 가장 아래에 놓인다. Stack( children: [ Container( color: Colors.red, width: 100, height: 100, margin: const EdgeInsets.all(8.0) ), Container( color: Colors.green, width: 80, height: 80, margin: const EdgeInsets.all(8.0) ), Container( color: Colors.blue, width: 60, h.. 2022. 3. 17.
[Flutter] 화면에 가득 차도록 위젯 사이즈 full로 설정하기 위젯은 기본적으로 자식 위젯만큼의 크기를 가진다. 플러터에는 사이즈 설정 속성이 없는 위젯이 많기 때문에, 화면에 꽉 차게 설정하기 위해서는 사이즈 설정 속성이 있는 위젯을 이용하여 세팅해 줄 수 있다. SizedBox나 Container와 같이 사이즈를 설정할 수 있는 위젯의 크기를 double.infinity 로 설정한 뒤, 기본 위젯을 자식으로 설정해준다. SizedBox( width: double.infinity,//가로 꽉 차게 설정 height: double.infinity,//세로 꽉 차게 설정 child: Container(//꽉 채우고자하는 위젯 //생략 ) ) 백그라운드 색을 노란색으로 설정하고 비교해보면 화면이 가득 채워지는 것을 확인 할 수 있다. [설정 전] [설정 후] [전체 코.. 2022. 3. 17.
[Flutter] 레이아웃 위젯 백그라운드 색상 채우기 Row나 Column과 같은 위젯에는 백그라운드 색상을 채우기 위한 속성이 존재하지 않는다. 따라서 다음과 같이 위젯을 Container 혹은 ColoredBox로 감싼 뒤 색상을 설정해줄 수 있다. Container(//ColoredBox도 가능 color: Colors.yellow, // 여기에 설정하는 색이 백그라운드 색 child: Row(...), // 기본 위젯을 자식으로 설정 ) [실행 결과] [전체 코드] import 'package:flutter/material.dart'; //앱 시작 부분 void main() { runApp(const MyApp()); } //시작 클래스. 머티리얼 디자인 앱 생성 class MyApp extends StatelessWidget { const MyAp.. 2022. 3. 17.
[Flutter] MainAxis와 CrossAxis Axis Row, Column과 같이 방향성이 있는 위젯은 mainAxis와 crossAxis에 관한 프로퍼티가 존재한다. mainAxis는 위젯의 기본 방향에 대한 속성이고, crossAxis는 반대방향에 대한 속성이다. 다시 말해, 기본 수직으로 정렬되는 Column은 세로가 mainAxis, 가로가 crossAxis가 되며 기본 수평으로 정렬되는 Row는 가로가 mainAxis, 세로가 crossAxis가 된다. 이 내용을 그림으로 표현하면 아래와 같다. Axis 속성에는 mainAxisSize와 mainAxisAlignment, crossAxisAlignment를 지정할 수 있으며, 아래와 같이 속성에 정의한다. Row( mainAxisSize: MainAxisSize.min, mainAxisAl.. 2022. 3. 17.
반응형

티스토리툴바