Flutter 기본 레이아웃
🔷 Flutter Layout
이제 Flutter 레이아웃을 어떻게 만드는지 작성해보자!
장마가 시작되서 비가 매우 몹시 많이온다.. 우리 동네는 산사태 발령 주의보도 떨어졌다,, 정말로 출근하기 싫은 날이였음,, ㅠㅠ 그래도 나왔으니 뭐라도 해야지.. 아 참 오다가 기사보니까 DP 시즌2 예고편이 떠서 보면서왔는데 재밌을 것 같았다 ㅋㅋㅋㅋㅋㅋ 논알콜 맥주에 피자 먹으면서 남자친구랑 봐야겠당 =3333❤️❤️ (이렇게 수다떠는 이유는 공뷰하기 싫어서잉,, ㅠ)
🔶 기본 위젯 만들기 전 단계
그 전에 리액트로 작업할 때도, 가끔 warning 경고가 뜨는데 이게 굉장히 신경쓰여서 무시하고 싶어 진 적이 있다. Flutter도 마찬가지로 Lint를 무시할 수 있음.
🔹analysis_options.yaml
웹 프론트 작업과는 다르게, eslint를 설치할 필요 없이 이 파일 안에서 컨트롤이 가능하다. ❗❗띄어쓰기 민감함.. 두칸씩 띄어쓰기 필수
linter:
rules:
prefer_typing_uninitialized_variables : false
prefer_const_constructors_in_immutables : false
prefer_const_constructors : false
avoid_print : false
sized_box_for_whitespace : false
avoid_unnecessary_containers : false
prefer_const_literals_to_create_immutables: false
이 내용을 일일이 알 필요는 없음. warning 표시가 뜨는 구간이 생기는 곳에 마우스를 갖다 대면, 어떤 이유로 warning 을 발생시키는지 알 수 있는데, 그거 그냥 여기서 false 처리 해주면됨.
🔹main.dart
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Text('안녕'),
);
}
}return 전까지는 플루터 개발자가 이렇게 써야 한다고 만들어놓은 Rule 이다. 리액트 App, index와 마찬가지로 그려줄 때 이런식으로 그려줘야 한다고 하는건데
우리가 신경써야 할 부분은, 그려주는 부분인 MaterialApp() 이 함수임.
🔶 기본 레이아웃
머리 몸통 다리 만 기억하면 됨.
return MaterialApp(
home: Scaffold(
appBar: AppBar( title: 위젯 ),
body: 위젯,
bottomNavigationBar: BottomAppBar( child: 위젯 ),
)
);🔶 기본 위젯 만들기
- Text
- Image
- Icon
- Box
요 네가지만 기억하면 된다.
return MaterialApp(
home : Row (
children:[
Icon(Icons.call),
Image.asset(path),
Text("텍스트입니다!")
]
)
)요런식으로 쓰면 됨.
🔹Box
나머지 위젯은 다 비슷한데, 박스는 종류가 쫌 다르다. MUI를 생각하면, 쫌 이해가 쉬운데 Box 종류 위젯은 보통
- Container (쫌 무거운 느낌.)
- SizedBox (쫌 가벼운 느낌)
- Stack (Flex로 쌓을 때)
- Row (옆으로 쌓을 때 )
- 등등 ..
이렇게 많이 사용한다. Container 안에는 child 오브젝트가 있으 Value 값으로 안에 들어가야할 위젯이나 요소들을 넣어주면 된다.
// React
const Component =({children}) => {
return (
<>
{children}
</>
)
}
#Flutter
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Container(
child: Text("하이~") //Text = children이 됨. Flutter에서는 위젯이 들어옴.
)
);
}
}🔶 위젯 스타일링
지금 강의 진도도 얼마 안나가고, 위젯 종류도 어떤게 있는지 잘 모르지만, 기본적인 내용과 스타일링 하는 법을 간단히 적어보려고 한다.
🔸Container
이 친구는 제법 스타일링이 자유로운 친구다. 아주 많이 쓸 것 같은 위젯이며, MUI에서 젤 만만한 Box같은 느낌이다.
@override
MaterialApp(
home: Container( width:50, height:50, color:Colors.red)
)여기서 단위는 PX이 아니다. Flutter의 모든 단위는 LP라고 하는 단위인데, Logical Pixel이라고 부른다고 한다.
핸드폰마다 화질이 다르고 들어가는 px의 수가 다르기 때문에, 우리가 눈으로 보이는 , 약간 cm와 같은 절대적인 수치를 사용한다.
여기서 padding이나 margin 같은 간격이나, 크기 이상의 디테일한 스타일링이 필요하다면 decoration 메서드를 사용한다.
child: Container(
// EdgeInsets.all(모두),
// EdgeInsets.fromLTRB(왼쪽,위,오른쪽,아래),
padding:EdgeInsets.all(24) ,
//decoration : style 같은 속성, 안에 디자인 넣으면 됨.
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
),
child: Text("헬로우~")
),전임님이 말하고 내가 느끼기에 다트라는 언어는 타입에 굉장히 민감한 언어인 것 같다. 개발자가 약간 타입에 대해 강박이 있어 보일만큼,, ㅎㅎㅎㅎ 키 오브젝트 형태 이지만, value 값은 대부분 매서드를 호출해서 사용하는 방식이다.
value 값에 뭐가 들어올지 모를 땐 key 부분에 마우스를 대고 올리면, 아주 친절하게 타입을 알려주고, 대충 끠워맞추면 대부분 맞는다.
🔸Row / Column
MaterialApp(
home: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Icon(Icons.call),
Icon(Icons.message),
Icon(Icons.account_box),
],
),
)
)Row는 display:flex 와 비슷하게 옆으로 나란히 위젯들을 배치하고 싶을 때 사용한다. Mui에서도 있었을법 싶은데 까먹었다. ㅎㅎ
다른 요소들과 다르게
mainAxisAlignment: MainAxisAlignment.spaceEvenly; //justify-content
crossAxisAlignment: CrossAxisAlignment.center; //align-items
두개의 편리한 매서드를 제공해서, 스타일링 없이 위젯 안에 넣어서 flex하게 요소를 배치하고 싶을 때 사용하면 된다.
- Row : 가로배치
- Column : 세로배치
아따 디자인 번거롭네 ㅠㅠㅠㅠ 아직까지는 적응이 안되지만 , 자동완성이 있으니까 괜찮겠지 ^^?
출처 🙏🏻