Flutter7 [ 1-1. AppBar & SliverAppBar ] 스크롤하면 숨는 AppBar, SliverAppBar! 1-1. AppBar & SliverAppBar"스크롤하면 숨는 AppBar, SliverAppBar!"고정형 AppBar와 스크롤 반응형 AppBar우리가 보통 사용하는 AppBar는 (메인)화면에서 고정된 상단바로, 앱의 이름이나 각종 버튼이나 drawer를 열게 해줍니다.고정된다는 뜻은 화면의 일정 영역을 지속적으로 차지한다는 뜻인데,메인 컨텐츠를 볼 때는 이 상단바가 필요없을 때는 사라지게 하면 더 넓게 컨텐츠를 즐길 수 있지 않을까요??(예를 들면 웹툰을 볼 때 처럼 말입니다!) 스크롤을 내릴 때만 AppBar가 축소되거나 사라지고, 다시 올리면 나타나는 스크롤 반응형(sliver) AppBar를Flutter에서는 SliverAppBar라는 위젯으로 기본으로 제공하고 있습니다!SliverAppB.. 2024. 10. 4. [ 1. Scaffold ] 화면의 기본 뼈대를 소환해봅시다! 1. Scaffold" 화면의 기본 뼈대를 소환해봅시다! " Flutter에서 화면을 이루는 종합적 뼈대를 Scaffold라고 합니다. 종합적 뼈대가 무슨 뜻인지에 대해서, 우리가 메인 화면을 만들 때 "빈 공간에 글자 몇 글자"만 띄워도 상관은 없지만 다른 앱에서는 흔히 로 이루어진 구성을 알 수 있습니다. 이런 구성이 들어있는 종합적인 뼈대가 바로 Scaffold입니다. 꼭 Scaffold를 사용할 필요는 없지만, 기본적인 레이아웃 틀을 제공함으로써 화면 출력할 때 잘 쓰이는 위젯입니다. (아래에서 언급하겠지만 Scaffold가 없으면 drawer를 사용하기 어려운 경우가 있습니다. 왼팔이 잘린 느낌일까요?) Scaffold의 내부 속성들조금 더 구체적으로 어떤 구성을 가지고 있는지 알면 좋을 내부 .. 2024. 10. 4. [ 0. Prologue ] 위젯의 종류와 구분, 사용법을 적어보는 공부 카테고리 막상 Flutter를 이용해서 앱을 만들려고 할 때 내가 구현하고 싶은 대상의 명칭도 궁금하고 (가령 카드라든가 BottomAppBar라든가 등등)전체적으로 내가 어떤 걸 쓸 수 있는지도 궁금하고 (종류가 너무 많아...)예시를 보면 비슷비슷한 것들은 많은데 뭐를 정확히 써야할지 모르겠고 (진짜 비슷한 아이들) 한꺼번에 설명이 있었으면 좋겠다 싶어서 한번 써보자는 식으로 글을 작성해보기!! 위젯의 종류는 공식 홈페이지의 위젯 카테고리와 유튜브를 참고하여 전개할 예정입니다 :) https://docs.flutter.dev/ui/widgets Widget catalogA catalog of some of Flutter's rich set of wid.. 2024. 10. 4. Flutter widget 위젯 정리 3 (정리 중) 리스트와 트랜지션, 애니메이션, 빌더ListViewListTileReorderableListViewPageViewDismissibleGridView.builderGridTileGridTileBar CustomScrollViewListWheelScrollViewSingleChildScrollViewNotificationListenerScrollbar SliverAppBarSliverListSliverFixedExtendtListSliverGridSliverOpacitySliverPaddingSliverToBoxAdapter FadeTransitionDecoratedBoxTransitionScaleTransitionRotationTransitionPositionedTransitionSlideTransitio.. 2024. 2. 8. Flutter Widget 위젯 정리 2 (정리 중) 여기서는 우리가 평소에 위젯 같다고 생각한 위젯들 / 기능이 있는 위젯들을 소개한다. 아이콘 : Icon버튼더보기1. ElevatedButton누를 수 있는 기본적인 버튼이다. 2. IconButton아이콘이 들어갈 수 있는 버튼이다. Icon을 입력변수로 받으니 주의해야한다. 3. TextButton텍스트로 누를 수 있는 버튼이다. 4. CloseButton흔히 볼 수 있는 X자 버튼이다. 5. MaterialButton기본적으로 onPressed를 가지는데기본 색깔, 순간 터치 시 색깔, 꾹 누를 시 퍼지는 색깔을 정할 수 있다. 6. OutlinedButton바깥 실선이 존재하는 버튼이다...각종 위젯들 [ 스위치, 라디오, 체크박스, 토글, 슬라이더 ]더보기1. Switch / SwitchList.. 2024. 2. 8. Flutter Widget 위젯 종류 1 (정리 중) Flutter를 사용하고 싶은데 막상 앱 프론트엔드 개발을 하려고 하니까UI나 기능적인 위젯을 어떻게 사용해야할지 감이 안 온다.또한 위젯 종류가 하도 많고 비슷비슷한 걸 떨어뜨려놓고 그래서 더 방황하기가 쉽다.몸으로 부딪혀가며 익히기 쉬울법한 위젯 구분을 하는 중이다.(아직 구체적인 코드는 첨부 안 하는 중.)* iOS와 MacOS 제외 앱 구조와 뼈대 [ !!! ]더보기1. MaterialApp앱이 안드로이드 메터리얼 디자인으로 만든다고 선언하는 것.main.dart에서 볼 수 있으며 이 안에서 앱의 뼈대를 정하는 것이다. 2. ThemeData전체적인 컬러 테마 같은 정보를 정하는 위젯이다. 참고만 해도 된다. 3. Scaffold화면의 뼈대를 생성하는 위젯. 4. AppBarScaffold의 머리.. 2024. 2. 8. Flutter Widget 종류 (정리 전) https://www.youtube.com/watch?v=kj_tldMmu4w&list=PL82uaKJraAILRBFE1XhCyfvu-Fclc6vv1 AbsorbPointer : 클릭을 흡수하는(방지하는) 위젯 showDialog : Dialog(네모박스) 띄우기 AlertDialog : actions, title, contentPadding, content로 이루어진 Dialog 테마 Align :[ alignment, child ]Container 내부에 child를 정렬하고 싶을 때 Container-align-child로 감싸는 식으로 사용되는 위젯 AnimatedAlign :[ alignment, duration, curve, child ]alignment에 boolean으로 정렬 상태를.. 2024. 2. 4. 이전 1 다음
