목록[Flutter] (37)
민프
이번 포스팅에서는 위 결과 화면과 같이 상단에 TabBar를 만들어서 Tab메뉴에 대한 화면을 만들어보려고 합니다. TabBar는 일반적으로 AppBar 의 AppBar.bottom 부분 으로 생성되고 TabBarView 와 함께 생성되고, TabBar 및 TabBarView 의 동작을 제어하기 위한 추가 옵션을 제공하는 TabController를 사용하여 TabBar를 구현할 수도 있습니다 . 그리고 TabController 대신 DefaultTabControlle를 사용할 수 있습니다 . Flutter는 역시.. 잘 되어있는 것 같다 위 결과화면에 대한 코드는 아래와 같습니다. import 'package:flutter/material.dart'; import '../../constants/sizes..
Flutter 개발을 할 때마다 느끼는거지만 개발 시간을 줄이기 위한 기본 위젯들이 잘 되어있다고 생각합니다. 이번 포스팅에서는 Flutter BottomSheet를 적용해보려고 합니다. 먼저 결과 화면을 봐볼까요? 위 영상에서 댓글 아이콘을 누르면 BottomSheet가 잘 나오는 것을 확인할 수 있습니다. 위 BottomSheet를 아래 예시 코드를 입력하면 쉽게 구현할 수 있습니다. void _onCommentsTap(BuildContext context) { showModalBottomSheet( context: context, builder: (context) => Container(), ); } . . . GestureDetector( onTap: () => _onCommentsTap(cont..
Flutter에서 Animation을 적용해보려고 합니다. Flutter에서 Animation을 보다 쉽게 적용하는 방법은 크게 1. animation 위젯 사용 2. animationController 사용 이 있습니다. 예제 화면 설명은 영상이 플레이 되고 있는 상태 인 화면을 터치하면 AnimatedOpacity가 적용된 플레이 이모티콘이 나오면서 영상이 정지가 되고, 정지 된 영상 화면을 클릭하면 AnimatedOpacity가 적용된 플레이 이모티콘이 사라지게 되면서 영상이 플레이 되는 화면 입니다. 1. animation 위젯 사용 https://docs.flutter.dev/ui/widgets/animation Animation and motion widgets A catalog of Flut..
앱, 웹을 처음 만들때 프론트엔드에서 다크모드, 라이트모드를 미리 생각하고 만들지 않는다면 디자인 시스템에 빠르게 맞추지 못할수도 있기 때문에 처음 만들때 ThemeData, TextTheme을 미리 설정해놓고 작업을 하는게 좋다. 그래서 ThemeData, TextTheme 화면마다 공통 된 Theme을 적용해보려고 한다. 1. ThemeData 설정 https://api.flutter.dev/flutter/material/ThemeData-class.html ThemeData class - material library - Dart API Defines the configuration of the overall visual Theme for a MaterialApp or a widget subtree..
공식문서를 기준으로 Flutter의 아키텍쳐에 대해서 살펴보자 결론적으로 Flutter Dart 코드는 운영체제와 직접적으로 소통하지 않는다. 보통 Native 앱 개발을 할 때 버튼이나 Text Input 등 어떠한 요소를 만들어 달라고 하면 각 운영체제에게 전달되게 됨으로써 안드로이드 or IOS에서의 버튼이 만들어지게 되는데 Flutter는 그렇지 않다. 실제로 Flutter에는 각 OS마다 버튼을 만들어내는 기능은 존재하지 않는다. 결론적으로는 Flutter에서는 게임 엔진과 같이 동작하게 되는데 쉽게 말하자면, 캔버스에 그림을 그리듯이 표현한다. Flutter에서 렌더링엔진 (Skia, Impeller)에 대해서 궁금하면 아래 링크로 가서 알아보자 https://minf.tistory.com/2..
Flutter의 핵심에는 대부분 C++로 작성되고, Flutter 애플리케이션을 지원하는데 필요한 Flutter 엔진이 있다. 그 Flutter 엔진에는 새 프레임을 칠해야 할 때마다 장면을 래스터화하는 역할을 하는데 렌더링을 담당하는 엔진은 Flutter 3.10에는 Impeller, 이전에는 Skia 렌더링 엔진이 있다. 이 두개의 렌더링 엔진에 대해서 알아보기 전에 렌더링이란 무엇인지부터 알아보자 렌더링이란? 렌더링이란UI 코드를 실제로 화면에 표시되는 픽셀로 변환하는데 도움이 되는 소프트웨어이다. 예를 들어서 위 와 같은 앱이 있다고 생각해보자 저 두번째 사진의 FlutterLogo가 첫번째 사진에서의 Flutter Framework가 되는 것 이다. Flutter 프레임워크에서 위젯 트리는 세번..
아래 GIF는 인스타그램의 릴스 페이지를 보여주는 부분인데 저렇게 한 페이지, 페이지를 밑으로 내려서 구현하는 것을 해보려고 하는데 Flutter에서는 저 부분을 구현하기 쉽게 PageView 라는 Widget을 이용해서 구현할 수 있다. https://api.flutter.dev/flutter/widgets/PageView-class.html PageView class - widgets library - Dart API A scrollable list that works page by page. Each child of a page view is forced to be the same size as the viewport. You can use a PageController to control whic..
BottomNavigation을 빠르게 구현하고 싶다면 아래 Widget들을 사용해보자 참고로 Flutter는 material 디자인을 체택하고 있는데 아래 링크를 참고헤서 m2랑 무엇이 다른지도 확인해보고 참고해보자 https://m3.material.io/ Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. m3.material.io BottomNavigationBar (m2 - material) class _MainNavigation..
기본 위젯 언어 설정 pubspec.yaml dependencies: . . . flutter: sdk: flutter flutter_localizations: sdk: flutter intl: any https://pub.dev/packages/flutter_localization https://pub.dev/packages/intl 위 패키지들을 설치해주고 아래 main.dart에 localizationsDelegates를 추가해준다. localizationsDelegates 여기에서 delegates란 일종의 번역 파일들로 생각하면 된다. main.dart @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutt..
@override Widget build(BuildContext context) { return GestureDetector( onPanUpdate: _onPanUpdate, onPanEnd: _onPanEnd, child: Scaffold( 화면을 넘기는 Swipe를 GestureDetector는 Pan이라고 한다. 여기에서 onPanUpdate는 사용자가 dragging(화면을 누른 상태로 손가락을 움직이는 상태)할 때를 말하고, onPanEnd는 사용자가 dragging을 끝냈을 때 콜백되는 함수를 말한다. onPanUpdate에 들어가는 함수를 봐보자 void _onPanUpdate(DragUpdateDetails details) { if (details.delta.dx > 0) { setStat..