💎 개요
플러터를 사용해보고 실제로 프로젝트에 적용해보면서 배우고 구글링하면서 얻은 지식들을 좀 정리해보고자 velog 게시글로 작성해본다!!
🍫 참고 자료들
flutter를 학습하기 위해서 먼저 바로 들어가기 보다 dart에 대한 문법을 좀 아는 것이 필요하다고 생각하여 인프런에 있는 Flutter 입문 강의를 먼저 수강하였다. 내용이 그리 많지 않고 flutter가 react-native보다 쉽다는 생각이 들어서 좀 더 수월했었던 것 같다.
또한 https://pub.dev 에서 많은 패키지들을 검색해보면서 유용한 것들을 사용해볼 수 있었는데, 이러한 패키지들을 이용하여 좀 더 효율적인 코드들을 사용해볼 수 있었던 것 같다. 구글링하면 무엇이든 다 찾아낼 수 있다 ^^
💎 기본 기능들
🍫 설치
나의 경우에는 맥북프로 13인치를 사용하고 있기 때문에 mac환경에 맞게 설치를 완료해주었다. https://docs.flutter.dev/get-started/install 요기서 설치를 각 환경에 맞게 해주면 된당. 공식 문서에 자세한 설명이 있으니 잘 참고하고 해결해보면 되구 flutter doctor 명령어를 이용하여 문제가 없다면 에뮬레이터를 실행하고 잘 작동하는지 확인해보면 된다.
🍫 Scaffold
가장 기본적인 구조로 대표적으로 appBar와 floatingActionButton을 이용할 수 있는 레이아웃 구조이다. 여기서 react-native와는 달리... navigation의 편리함도 볼 수 있는데 flutter에서는 bottom navigation을 그냥 직접 사용해버릴 수가 있다!!
아래 내용은 예시의 내용이다!!
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Sample Code'),
),
body: Center(child: Text('You have pressed the button $_count times.')),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() => _count++),
tooltip: 'Increment Counter',
child: const Icon(Icons.add),
),
);
}살짝 구조를 보면 Scaffold를 이용하여 일반적으로 생각하는 화면의 구성을 구현할 수 있다. 상단의 appBar와 함께 하단에는 bottomnavigation, 그 이외의 내용에도 body 부분에 코드를 작성해주면 더 많은 것들을 활용할 수 있기 때문에 Scaffold를 기본으로 사용하면 좋겠다!!
🍫 Stateless, Stateful
쉽게 말해서 동작이 없는 것과 동작이 있는 것으로 생각하면 되겠다. 즉 변경될 소지가 없는 것과 변경될 수 있는 것으로 화면 동작에 있어서 선택할 수 있는 Widget이다!! stateless를 기본으로 그 안에 stateful한 widget을 넣음으로써 동작시킬 수 있다.
위 코드 사진처럼 StatelessWidget을 사용할 수 있다.
그리고 위와 같이 StatefulWidget을 사용한다. 보면 알다시피 StatefulWidget은 State를 추가로 extends를 작성해주어서 동작할 수 있게끔 구현해주는 class가 하나더 존재하는 것을 확인할 수 있다. 이러한 차이가 있다는 점 생각해두자.
🍫 Text
어찌보면 가장 많이 또는 가장 흔하게 사용할 수 있는 class일 것이다. 이 Text class를 이용하여 우리는 원하는 문자를 화면에 배치하고, 정렬하고, 스타일을 적용시킬 수 있을 것이다.
Text(
'Hello, $_name! How are you?',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: const TextStyle(fontWeight: FontWeight.bold),
)flutter 공식사이트에 있는 예시를 들고와봤는데 Text에는 주로 어떤식으로 정렬할지 또는 어떤 스타일을 적용할지 정도 기억해두면 편리할 것 같다. TextStyle을 이용하여 원하는 스타일의 Text를 꾸밀 수 있다는 점 생각하고 전달해주는 data를 이용하여 반응에 따라 원하는 문자를 띄울 수도 있다는 것 생각해보자!!
🍫 Container
Container class는 말 그대로 컨테이너 박스를 생각해보면 된다. 우리는 그 컨테이너 박스 안에 다양한 것들을 넣고 디자인 하여 감싸줄 수 있다고 생각하면 된다!! 따라서 컨테이너의 크기와 디자인들을 정해주고 그 안의 내용 또한 child 속성을 통해 넣어줄 수도 있는 class이다.
Container(
constraints: BoxConstraints.expand(
height: Theme.of(context).textTheme.headline4!.fontSize! * 1.1 + 200.0,
),
padding: const EdgeInsets.all(8.0),
color: Colors.blue[600],
alignment: Alignment.center,
child: Text('Hello World',
style: Theme.of(context)
.textTheme
.headline4!
.copyWith(color: Colors.white)),
transform: Matrix4.rotationZ(0.1),
)사용은 위와 같은 예시로 사용하고 앞서 말한듯이 child 속성을 통하여 위에서 살펴본 Text class를 이용하여 Container class를 구성할 수 있다.
🍫 Column
Column class는 flutter를 직접 프로젝트에 적용시켜보면서 자주 사용하게 된 class였다. 열을 뜻하는 Column class를 이용하여 여러 개의 child들을 나열할 수 있었고 이 Column을 crossAxisAlignment 속성과 mainAxisAlignment 속성을 통해서 배치를 적용할 수 있었다. 만약 여러개의 class들을 나열하고 싶을 때 이 Column class를 이용하여 여러가지 디자인과 기능들을 배치할 수 있었다.
기억해야할 점은 children: [] 과 앞서 말한 두가지 배치 적용 속성들을 기억해두면 좋을 것 같다.
🍫 Row
Row class는 앞서 소개한 Column class의 반대이면서 같이 활용하기 좋은 class이다. Row는 행으로 가로로 배치가 되는데 여러가지 child들을 포함할 수 있으면서도 속성들을 Column class에서 사용한 것과 같이 적용할 수 있다.
Row(
children: const <Widget>[
Expanded(
child: Text('Deliver features faster', textAlign: TextAlign.center),
),
Expanded(
child: Text('Craft beautiful UIs', textAlign: TextAlign.center),
),
Expanded(
child: FittedBox(
fit: BoxFit.contain, // otherwise the logo will be tiny
child: FlutterLogo(),
),
),
],
)사용은 위와 같은 코드의 예시로 실행된다!! Column과 Row class는 여러 개의 child들을 원하는 배치에 맞춰 적용할 수 있으니 꼭 기억해두자!!
🍫 Stack
Stack class또한 Column, Row와 마찬가지로 유용한 class이다!! 알고리즘에서 배웠었듯이 내용물을 차곡차곡 아래에서부터 쌓아올린다고 생각하면 된다.
Stack(
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 90,
height: 90,
color: Colors.green,
),
Container(
width: 80,
height: 80,
color: Colors.blue,
),
],
)위와 같이 Stack을 사용할 수 있다!! 사진과 같이 여러 Container들을 children 속성을 통해 쌓아올릴 수 있고, 맨 처음에 나온 것이 가장 아래의 Stack에 들어가서 구현될 것이다!!
🍫 Padding
이번 게시글에서 마지막으로 정리해볼만한 내용은 Padding class인데 padding속성을 통해서 간격을 조정해주는 것이라고 생각하면 된다!!!
const Card(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Text('Hello World!'),
),
)사진과 코드를 참고해보자!! padding속성에서도 EdgeInsets를 활용하여 모든 방향 또는 원하는 속성을 부여하여 간격을 조정할 수 있다. 화면을 구성하면서 Padding을 이용하여 여러가지 디자인을 구성해볼 수 있도록 해보자!!
💎 느낀 점 정리
한번에 다 정리는 하지 못했지만... 일단 기본적인 class들과 dart문법, 구조들을 살펴보았다. 다음 정리에서는 본격적으로 내가 flutter 프로젝트에 어떤 템플릿을 적용해보았는지, 마주하게된 문제점들은 무엇이 있었는지, 어떤 것들을 잘 활용해보는지 소개해보고 정리해보아야겠다!!
flutter를 시작해본지 3주정도 된것 같은데 기존에 사용해보았던 react-native보다는 훨씬 쉬운것,...?같다 ㅠㅠ 내가 아직 제대로 접해보지는 못하거겠지만 처음 공부했을 때보다 오류해결이 손쉬웠었던것 같다!! ㅠㅠ
이러한 오류해결도 어떤 식으로 해결했었는지 정리해서 올릴 수 있는 기회가 있다면 올리도록하겠다!!
화팅하장!!
