💎 개요
저번 게시글에 이어서 두번 째로 Flutter에 대해서 좀더 알아보는 글을 작성해보고자 한다!! (참고 -> 이전 게시글)
Flutter를 이용하면서 유용하게 써본 기능과 모바일 개발을 접해보면서 자주 써본, 또는 바로 떠오르지 않아서 글들을 참고해서 알아내었던 유용했던 것들을 이번 게시글에서 조금 다뤄보고자 한다!!!
🍫 참고자료
역시 저번과 마찬가지로 공식 flutter 문서를 참고하였다. https://api.flutter.dev/ 여기서 주로 기능들에 대한 소개를 자세히 알 수 있어서 이를 확인하였당.
💎 기능들
🍫 AppBar
모바일 개발에 있어서 가장 많이 보이기도 하는 것 같은 앱 상단에 bar를 표현할 수 있는 기능이다. appbar를 이용하여 앱 상단에서 네비게이션을 이용한 이동 또는 버튼을 생성해둘 수 있으면서 앱을 꾸밀 수 있는 가장 기초적인 기능이다. 이 AppBar는 Scaffold 내부에서 사용할 수 있는데,
appBar: AppBar(
actions: <Widget>[
TextButton(
style: style,
onPressed: () {},
child: const Text('Action 1'),
),
TextButton(
style: style,
onPressed: () {},
child: const Text('Action 2'),
)
],
),이런식으로 AppBar 내부의 actions기능을 이용하여 appbar에 버튼들을 넣을 수도 있다. 여기에 title을 추가해 준다면 appBar에 텍스트로 제목을 넣을 수도 있다. 기본 앱 틀에서 상단 바가 들어가간다면 appbar를 유용하게 쓰면 될 것 같다!!
🍫 FloatingActionButton
floatingactionbutton은 이름 그대로 페이지에 떠있는 버튼을 뜻하는 것으로 특정한 위치에 지정해서 버튼을 올려서 사용할 수 있도록 하는 기능이다. 이역시 Scaffold 클래스 내부에 사용해줄 수 있으면서 눌리는 onpressed를 이용하여 앱의 다른 네비게이션이나 특정 기능들을 넣을 수 있다.
floatingActionButton: FloatingActionButton(
onPressed: () {
// Add your onPressed code here!
},
backgroundColor: Colors.green,
child: const Icon(Icons.navigation),
),위와 같이 사용할 수 있는데 child 속성을 이용하여 button 내의 이미지 또는 아이콘을 넣어서 꾸밀 수 있다. 이외에도 floatingactionbutton을 이용한 클래스가 더 있는데 floatingactionbuttonlocation, floatingactionbuttonanimator 등을 이용하여 배치나, 애니메이션 기능을 추가할 수도 있다.
위는 공식 사이트의 예시 인데 다음과 같이 label과 icon을 넣어서 텍스트와 아이콘을 넣고 extended를 이용하여 다른 형태의 button을 꾸밀 수도 있다.
floatingactionbuttonlocation을 이용하여 배치를 바꿀 수도 있다. FloatingActionButtonLocation.위치 를 이용하면 되구 이는 굉장히 많기 때문에 문서를 참조하장!
🍫 TabBar
appBar를 이용해 보았다면 TabBar클래스 또한 유용하게 써볼 수 있다!! TabBar는 appbar의 bottom 속성을 이용하여서 작성할 수 있다. TabBar는 appbar bottom에 이어서 나타낼 수 있는데 이는 여러 개의 탭들을 이동하면서 그 탭에 해당하는 페이지를 띄울 수 있다. 만약 bottomnavigation을 사용하지 않는다면 간편하게 tabBar를 이용하여 쓰는 것도 좋은 방법인 것 같다!!
return DefaultTabController(
initialIndex: 1,
length: 3,
child: Scaffold(
appBar: AppBar(
title: const Text('TabBar Widget'),
bottom: const TabBar(
tabs: <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
),
body: const TabBarView(
children: <Widget>[
Center(
child: Text("It's cloudy here"),
),
Center(
child: Text("It's rainy here"),
),
Center(
child: Text("It's sunny here"),
),
],
),
),
);위 코드를 잠시 사용해보면 TabController클래스를 이용하여서 tabBar를 사용할 수 있도록 하였다. length를 이용하여 몇개의 tab을 사용할지 입력하고, tabs를 통해 앞서 입력받은 length의 해당하는 tab의 개수 만큼 Tab클래스들을 생성해준다. 그리고 Scaffold내부의 body 속성에 TabBarView클리스를 이용하여 각 탭의 개수에 해당하는 페이지의 view를 만들어낼 수 있다! 개수가 어긋나면 오류가 나니깐 주의하장!!
위는 내가 만들고 있던 프로젝트에서 구현해본 tabbar를 사용한 bottomsheet이다!!! 위와 같이 여러개의 화면을 구현하고 싶을 때 약간의 애니메이션 효과도 주면서 만들 수 있는 좋은 기능이다!!
🍫 SingleChildScrollView
SingleChildScrollView를 사용해보았는데 먼저 이를 사용하였던 이유는 오류가 발생해서인데 column이랑 row 클래스를 사용하였을 때 크기가 큰 여러 클래스들을 children 속성 내부에 사용하게 되면서 배치에 오류가 발생하였기 때문이다. 따라서 SingleChildScrollView를 이용한다면 이를 해결할 수 있었어서 알게 되었었다!!
그래서 주로 여러개의 widget들을 배치하려고할 때 유용하게 써먹을 수 있다!! 또한 스크롤 기능이 추가되어서 여러 widget들을 묶어서 하나의 스크롤이 되는 화면을 만들 수도 있다.
위의 예시와 같이 Column클래스를 SingleChildScrollView 클래스 내부에 사용하여 범위가 넘어가게 된다면 scroll도 사용할 수 있고 여러 widget들을 오류 없이 잘 사용할 수 있다!!
오류가 발생할 수 있는 여러 widget들을 배치하려고 할 때 overflow문제를 해결할 수 있어서 유용하게 사용할 수 있는 클래스이다!!
🍫 Gradient
배경색에 그라데이션 효과를 주고 싶어서 알아보았던 속성이다!! 많이 사용하지는 않겠지만 색에 다양한 느낌을 주고 싶거나 배경색을 꾸미고 싶을 때 유용하게 쓸 수 있을 것 같다!!
먼저 gradient 속성을 사용하려면 BoxDecoration클래스를 이용하여 LinearGradient와 같은 클래스를 통해 여러개의 color를 배열로 받아서 배치를 입력하여 그라데이션을 줄 수 있다!!
아래의 코드 처럼 예시로 사용해볼 수 있당!
Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xff3B4383),
Color(0xff5D4F83),
Color(0xffA67E90),
Color(0xffE19EA0),
Color(0xffF2B18E),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
)),
),위의 코드 내용은 아래의 이미지의 배경색처럼 표현될 수 있다 LinearGradient 클래스의 begin과 end의 속성을 통해 그라데이션의 시작 위치를 정해줄 수 있다는 점과 함께 그라데이션 효과를 이용해보자!!
💎 느낀 점 정리
저번 게시글에 이어서 프로젝트 또는 궁금했던 기능들을 검색해보고 코드로 작성해보면서 유용하고 자주 쓸 것같은 기본 기능들 이외의 것들을 조금 살펴 보았다!! flutter가 진짜 편리한 것 같아서 개인 프로젝트 또는 단기간에 앱을 만들려고할 때 정말 유용한 프레임워크인 것 같다!!
flutter 이외에도 리액트 공부를 진행해보고 싶은데 클론코딩을 한번 해보면서 추후에 그에 대한 내용도 작성해보고자 한다!!
요새 방학 중반 흘러가니깐 루즈해지고 집중도 잘 안되고 공부하기 싫어지는데,,,정처기 공부시작하고 프로젝트에 의욕도 사라져가서 그런 것 같다 ㅠㅠ 알고리즘은 꾸준히 풀고 있지만 다른 공부를 해봐야 늦게 시작해본 만큼 텐션올려서 열심히해보자🔥🔥
화팅해보장!!
