본문 바로가기

Widget4

[flutter] bottomNavigationBar / appBar 오늘은 앞으로 많은 앱에서 이용할 듯 한 위젯 bottomNavigationBar에 대해서 적어보려고 한다. 어플을 실행시켰을 때 많이 볼 수 있는 기본 틀(?)이라고 할 수 있는 두 가지가 상단의 appbar와 하단의 navigationBar이다. 먼저 appbar는 어플형태에서 많이 볼 수 있는 상단 bar를 의미한다. 해당 페이지가 어떤 페이지인지 알려주는 역할을 한다 카카오톡을 예시로 들면 이 곳이 appBar가 담당하는 부분일 것 같다. flutter에서 appBar는 제공되는 위젯이 있다. appBar: AppBar( backgroundColor: const Color.fromARGB(255, 255, 255, 255), elevation: 0, title: Row( mainAxisAlignm.. 2023. 6. 30.
[flutter] dropdownButton 적용하기 (feat. flutter widget of the week) 노마드 코드 flutter 챌린지를 하던 도중 여러개의 선택지 중 하나의 시간을 선택하여야 할 일이 생겼고, 어떤 위젯을 사용해야 할까 고민하다가 찾아 낸 위젯이 dropdownButton이다. dropdownButton 위젯은 옵션지가 주어지고 그 중 하나를 선택하는 형태의 위젯 해당 위젯의 설명은 flutter의 공식 유튜브에도 나와있다. 프로젝트에 적용을 해봤다 나는 타이머를 만들 되, 타이머 분 수를 15분부터 35분까지 5분 간격으로 사용자가 선택할 수 있도록 구현하려고 했다. int totalSeconds = 1500; void changeSeconds(int? seletedValue) => { if (seletedValue is int) { setState(() => {totalSeconds.. 2023. 6. 9.
[flutter] sizebox , spacer (with. flutter widget of the week) 오늘은 widget과 widget 사이의 공간 을 넣고 싶을 때 사용하는 sizebox와 spacer에 대해서 적어보려고 한다. sizebox sizebox는 위젯 사이에 공간을 줄 때, child 위젯에 size를 강제로 부여할 때 두 경우 이용하는 위젯이다. sizebox는 정확한 수치를 입력함으로써 크기를 지정한다. Row( mainAxisAlignment: MainAxisAlignment.center, children: const [ Text( "이용약관", style: TextStyle( color: Colors.white, fontSize: 12, decoration: TextDecoration.underline, ), ), SizedBox( width: 14, ), Text( "개인정보 처리.. 2023. 6. 1.
[flutter] wrap widget, opacity widget 적용해보기 (with. flutter widget of the Week) 오늘은 최근에 들었던 flutter 팀의 weekly widget 중 실제로 사용해본 2가지 위젯에 대해 적어보려고 한다. wrap wrap은 열이나 행으로 이루어진 곳에 아래와 같이 공간이 부족해서 옆으로 넘어가는 버튼이 있을 때, 글씨 크기나 화면 크기에 따라 칸에 맞게 자동으로 다음칸으로 넘어가게 해주는 위젯이다. css의 flex-wrap속성과 같은 속성인 것 같다. 직접 구현을 해봤을 때, wrap을 감싸기 전에는 위와 같이 밖으로 넘어가는 버튼이 생겼었다. wrap으로 감싸주니 칸에 맞게 알아서 정렬이 되어 있는 모습을 확인할 수 있다 ! Wrap( direction: Axis.horizontal, // 수평 방향 alignment: WrapAlignment.center, // 정렬(해당 코드.. 2023. 5. 15.
728x90
반응형