flutter
1.flutter
Flutter는 Google에서 개발 및 지원하는 오픈 소스 프레임워크이다. 프런트엔드 및 풀 스택 개발자는 Flutter를 사용해 다수의 플랫폼에 대한 애플리케이션의 사용자 인터페이스(UI)를 단일 코드 베이스로 구축한다.2018년도 첫 출시되었을 때는 주로 모바일
2.flutter 입문
플러터 앱실행의 시초하위페이지, 구성요소를 최 상단에서 담는 그릇titlethemehome✔️ MaterialApp에서 가장 먼저 나오는 페이지이다. 이 페이지는 Scaffold라는 형태를 가진다.✔️ 위와 같은 MetarialApp / Scaffold ....을 위젯
3.flutter 입문 _ 레이아웃
텍스트를 넣어주면 텍스트 크기 만큼 Container크기가 변하게된다.conatiner의 width가 변경된다.좌우에 padding 30이 적용되었다. 상하 좌우 모두 padding이 각각 20, 30씩 적용되었다.상하 좌우에 margin이 적용되었다.4방향 한번에 같
4.flutter 입문 _ 텍스트 (Text, TextStyle, RichText, TextSpan)
Text() >기본 텍스트 입력 활용 결과 TextStyle() > 텍스트 스타일 지정 활용 결과 RichText() > 여러개의 다른 스타일을 가진 문자를 화면에 그린다. RichText는 DefaultTextStyle을 기본적으로 적용하지 않아 기본 스타
5.flutter 입문 _ Align
자식을 부모 위젯의 특정 위치에 정렬하는데 사용Alignment상수는 두 가지 방법으로 설정할 수 있다.Alignment(double x, double y) \_ 함수 위치 직접 지정상수 이름을 사용하여 위치 지정x와 y 좌표는 -1 ~ 1 사이의 값이다.활용결과활용결
6.flutter 입문 _ AspectRatio
자식 위젯을 너비와 높이의 비율로 그릴 수 있다.활용결과codecode
7.flutter 입문 _ Baseline
자식 위젯의 baseline 기준으로 정렬하는데 사용, Baseline은 텍스트의 가장 낮은 선을 가르킨다.
8.flutter _ 입문 debug 모드리본제거
앱 실행시 우측상단에 'DEBUG' 리본이 생성되어있다.해결방법메인으로 실행되는 곳에debugShowCheckedModeBanner: false추가해준다.결과
9.flutter 입문 _ appBar
아이콘을 추가할 수 있다.텍스트를 추가할 수 있다.appBar의 크기를 조절 할 때 사용한다.탭바에 사용된다.결과backgroundColor 추가결과아이콘 버튼이나 간단한 위젯을 왼쪽에 배치할때 사용한다.leading 속성으로 메뉴 아이콘 넣어보기결과복수의 아이콘 버튼
10.flutter _ Image
전체 프로젝트 파일 내부에 'assets/images'경로를 생성해준 후 필요한 이미지를 'images'폴더 내에 넣어준다.파일 중 'pubspec.yaml'로 이동한다.assets: 뒤에 다음과 같이 이미지 경로를 입력해주면 되는데, 들여쓰기를 아래와 같이 하고 '-
11.flutter _ TextField (fillColor, border,icon)
TextField > TextField / TextFormField 위젯은 많이 사용되는 위젯이다. 이메일, 비밀번호, 전화, 집 주소 등과 같은 다양한 형태로 사용자 입력을 받는데 사용된다. TextField _ decoration TextField에 테두리와같은
12.flutter _ CustomScrollView
CustomScrollView > 사용자 지정 스크롤 효과를 만드는 ScrollView. 목록, 그리드 및 확장 헤더와 같은 다양한 스크롤 효과를 만들 수 있다. child나 children이 아닌 sliver를 받는다. drawer엇저고 하는 메뉴 만드는 위젯도 있
13.flutter _ SliverChildBuilderDelegate()
빌더 콜백을 사용하여 슬리버에 대한 자식을 제공하는 대리자.저번 flutter \_ CustomScrollView 에서 SliverList에서 delegate속성을 SliverChildListDelegate로 작성하여 자식 요소를 하나하나 넣어 리스트를 생성했다. 그치
14.flutter _ hex code 사용하기
플러터에서 hex code 컬러값 사용할 줄 몰랐는데 간단했다이런식으로 0xFF를 앞에 추가해주면 사용이 가능하다.
15.flutter _ TabBar style
https://www.flutterbeads.com/change-tab-bar-color-in-flutter/#Changing-indicator-color
16.flutter _ ClipRect / ClipRRect
직사각형으로 이미지를 자르는 위젯둥근 모서리 또는 원으로 이미지를 자르는 위젯ClipRRect 위젯과 borderRadius속성을 넣어주면 자식 요소에 적용이된다.
17.[flutter3] 이미지 출력하기
이미지 출력하기 이미지를 냅다 출력해 보았다. ✔️ Image 위젯 이미지를 출력하기 위해 사용해 준다. Image.asset _ asset으로 부터 이미지를 불러온다. 어디에서 이미지를 불러올지에 따라 ㄴ Image.file ㄴ Image.memory