하이픈은 먹지 않는다. 언더바 컨벤션
플랫폼 체크
stl 스니펫
내부 폴더는 따로 경로를 지정해줘야 된다.
scapfold = 뼈대
@override
Widget build(BuildContext context) { //runApp을 실행하면 build가 실행된다.
return MaterialApp(
home: Scaffold(),
);
JavaScript
복사
•
리스트의 위젯 타입 : children
Inset영역
해당 부분을 침범하면 안된다. System UI영역
Column에서 alt + enter
Wrap with widget 선택
SafeArea로 해당 칼럼을 감싸면 inset영역을 침범하지 않는다.
요렇게
Spacer()
•
픽셀로 그림을 그리면 다른 디바이스에서 다 깨진다.
•
그래서 해당 위젯을 사용한다.
빈 공간을 찾을 만들어 주는 위젯
이렇게 다 걸어준다.
만약 다른 공간없이 women과 kids사이에 spacer를 하나만 넣으면 그 사이에 전체 빈공간이 들어온다.
ctrl + space를 치면 해당 메뉴가 나온다.
기준에 따라 의미가 다르다.
Column이 기준이면 main은 세로
row가 기준이면 main은 가로
가운데 정렬
Spacer를 6개 사용한 거랑 동일한 효과를 준다.
양끝을 화면 끝으로 붙인다. spsace between
Row 에서 alt + enter 치면 해당 메뉴가 나온다.
Row에 alt + enter를 치면 padding설정이 나온다.
padding 값을 25를 준다.
Flutter inspector 다시 켜서 화면 확인인
TextStyle
텍스트 옆에 ctrl + space 로 스타일링 하는 메뉴를 찾는다.
글자 굵기 설정 하는 클래스 fontWeight
w100,w200 메뉴들도 있지만, bold도 사용가능
전부 적용시켜준다.
콤마 찍고 아래줄로 내리는게 실수가 적다.
접어서 위치를 파악
Image클래스, asset은 컴퓨터에서 자료를 찾는다.
network는 url로 찾는다.
이렇게 경로를 지정해주면, 사진이 들어온다.
사진명을 그대로 명시해줘야 이렇게 들어간다.
사진 크기 (ctrl + space로 메뉴검색)
사진 크기 높이 설정, height
300으로 설정.
Flutter Inspector로 새로고침해서 보면, 사진의 영역은 정해준 높이 보다 크다.
Cover는 비율이 안깨지고 잘리는 부분이 발생한다.
이렇게 픽셀로 정하면 overflow가 발생할 수 있다.
Expanded
asset을 클릭하고 ctrl + space 으로 wrap with widget을 적용한다.
expanded를 적용하면 사진이 늘어나서, 비율을 나눠 가진다.
Expanded는 flex타입이기 떄문에 비율을 설정 할 수 있다.
flex : 1, flex : 2 로 하면 화면처럼 비율이 정해진다.
SizedBox는 마진의 일종인데, 빈 공간을 넣는 역할을 한다.
세로 레이아웃에는 height를 적용하고 가로 레이아웃에는 width를 적용한다.
이렇게 한줄 짜리 속성은 , 를 치지말고 이렇게 정리해서 가독성을 높인다.
가독성은 , 콤마로 잡는다.
inset설정을 LRTB로 설정할 수 있겠지만, EdgeInests.only로 선택적 매개변수로 원하는 곳만 값을 주면 된다.
세로 방향 대칭 설정
Padding widget에 들어가보면 더 많은 것을 배울 수 있다.
플러터 사이트 / codeLabs
많은 사용 예시들을 라이브러리로 관리하는 사이트 이름
여기서 공부해라.
전체코드
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: StorePage(),
);
}
}
// stl 이라고 적으면 자동완성 기능이 활성화 된다.
class StorePage extends StatelessWidget {
const StorePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: [
// const는 변하지 않는 위젯 앞에 붙일 수 있다. const를 이용해 해당 위젯은 변하지 않음을 알려주면 중복된 위젯을 다시 그리지 않아 앱의 속도가 개선된다.
const Padding(
padding: EdgeInsets.all(25.0),
child: Row(
children: [
Text("Woman", style: TextStyle(fontWeight: FontWeight.bold)),
Spacer(),
Text("Kids", style: TextStyle(fontWeight: FontWeight.bold)),
Spacer(),
Text("Shoes", style: TextStyle(fontWeight: FontWeight.bold)),
Spacer(),
Text("Bag", style: TextStyle(fontWeight: FontWeight.bold)),
],
),
),
Expanded(child: Image.asset("assets/bag.jpeg", fit: BoxFit.cover)),
const SizedBox(height: 2),
Expanded(child: Image.asset("assets/cloth.jpeg", fit: BoxFit.cover)),
],
),
),
);
}
}
JavaScript
복사