flutter (8) 썸네일형 리스트형 [Flutter] Bottom Navigation Bar에 GetX 적용하기 BottomNavigationBar 에 currentIndex를 setState 대신 getX를 적용하는 방법을 살펴보자. 우선 getX를 적용하기 전에 tab bar 페이지를 생성하여 BottomNavigationBar를 생성한다. 예시를 들면 다음과 같다. import 'package:flutter/material.dart'; class NavigationBar extends StatelessWidget { const NavigationBar({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold(bottomNavigationBar: Get.find(); RxInt currentIndex =.. [Flutter] flutter 설치 및 세팅하기(mac 버전) 아래에 있는 링크에서 Flutter SDK를 다운로드 받는다. https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_2.0.6-stable.zip 플루터 공식문서 설치 메뉴얼에서 Flutter SDK 링크의 위의 파란 버튼이 있다. 버튼을 눌러주면 다운로드 폴더에 자동으로 다운로드된다. 다운로드 폴더에 zip파일을 다운된 상태에서 Flutter SDK를 설치하고 싶은 폴더에 sdk를 unzip하므로 실제 설치하는 폴더가 자신이 지정할 수 있다. 2. Flutter SDK를 설치하고 싶은 폴더를 정한다. 3. Flutter SDK를 설치하고 싶은 폴더로 이동한다. 터미널을 먼저 켜 주고 설치하고 싶은 폴더로 터미널에.. [Flutter] flutter 프로젝트 새로 생성하기 플루터 프로젝트를 만드는 아주 쉬운 방법 터미널을 켠다. 터미널에서 플루터 프로젝트가 위치할 폴더로 이동한다. cd 프로젝트가 위치할 폴더명cd folder_name 2. 플루터 프로젝트에 새로운 이름을 짓고 앞에 flutter create을 붙여준다. flutter create 프로젝트 이름flutter create myapp 이 한마디의 명령어에 새로 지어진 프로젝트 이름의 폴더가 생기면서 순식간에 새로운 플루터 프로젝트가 만들어진다. Running "flutter pub get" in myapp... 3.1sWrote 76 files.All done![✓] Flutter: is fully installed. (Channel dev, 1.20.0-0.0.pre, on Mac OS X10.14.5 18.. [Flutter] Flutter Navigator 사용법 (5) Flutter 공식문서의 Navigator 챕터에서 이전 화면에 데이터를 반환하는 방법에 대해 정리해보았다. 이전 화면에 데이터 반환하기 새로운 화면으로부터 이전 화면으로 데이터를 반환해야하는 경우가 있음. 예를 들어, 사용자에게 두 가지 옵션을 보여주는 화면에서 사용자가 한 옵션을 클릭하면 첫 번째 화면에 알려주고 그에 따른 실행을 하려는 경우 Navigator.pop()을 사용하여 다음과 같이 진행할 수 있음. 홈 화면을 정의함. 선택 창을 띄우는 버튼을 추가. 두 개의 버튼을 가진 선택 창을 보여줍니다. 하나의 버튼을 클릭하면 선택 창을 닫습니다. 선택된 정보를 홈 화면의 snackbar에 보여줍니다. 홈 화면을 정의. 예제에서는 홈 화면에서는 버튼 하나가 있고 버튼을 클릭하면 연동 창을 띄움. c.. [Flutter] Flutter Navigator 사용법 (4) 새로운 화면으로 데이터 보내기 종종 새로운 화면으로 단순히 이동하는 것 뿐만 아니라 데이터를 넘겨주어야 할 때도 있음. 예를 들어, 사용자가 선택한 아이템에 대한 정보를 같이 넘겨주는 경우가 있음. 예제에서는 Todo 리스트를 만들고 Todo를 선택하면 새로운 화면(위젯)으로 이동하면서 선택한 to do에 대한 정보를 표시함. Todo 클래스를 정의함. Todo 리스트를 표시함. Todo에 대한 상세 정보를 보여줄 수 있는 화면을 생성. 상세 화면으로 이동하면서 데이터를 전달. Todo 클래스를 정의. Todo를 표현하기 위한 간단한 정보를 표시함. 이 예제에서는 두 가지의 데이터를 갖고 있는 클래스를 정의함. class Todo { final String title; final String descri.. [Flutter] Flutter Navigator 사용법(3) Named route로의 화면 전환 flutter 공식문서의 Navigator 챕터에 있는 Named route 사용법을 정리해 보았다. 만약 앱의 다른 많은 영역에서 동일한 화면으로 이동하고자 한다면, 중복된 코드가 생기게 됩니다. 이러한 경우 named route를 정의하여 화면 전환에 사용하는 방법이 있음. Named route를 사용하기 위해 Navigator.pushNamed 함수를 사용할 수 있음. 두 개의 화면 만들기. Route 정의하기. Navigator.pushNamed를 사용하여 두 번째 화면으로 전환하기. Navigator.pop을 사용하여 첫 번째 화면으로 돌아가기. 두 개의 화면 만들기 우선 두 개 이상의 화면이 있어야 함. 예제에서는 첫 번째 화면에는 두 번째 화면으로 이동하기.. [Flutter] Flutter Navigator 사용법 (2) 플루터 공식문서의 중첩 네비게이터 활용 사례에 대해 일부 내용을 정리해 보았다. 중첩 네비게이터 앱은 둘 이상의 네비게이터를 사용할 수 있음. 하나의 네비게이터를 다른 네비게이터 아래에 중첩하여 탭 내비게이션 등을 작성할 수 있음. 중첩 네비게이터 사용 예제 import 'package:flutter/material.dart';// ...void main() => runApp(new MyApp());// ...class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Code Sample for Navigator', // MaterialApp con.. [Flutter] Flutter Assets와 image추가하기 플루터 공식문서의 중요성은 여러 번 강조해도 지나치지 않다. 플루터 개발자라면 공식문서의 어느 페이지에 어느 내용이 있는지 훤히 알고 있어야 한다. 플루터 공식문서의 Assets와 image 추가하기 내용을 정리해 보았다. Assets와 Image 추가하기 asset 플루터앱은 코드와 에셋(asset 또는 resources)으로 구성됨 asset의 종류 static data (예 JSON files) configuration files icons images (JPEG, WebP, GIF, animated WebP/GIF, PNG, BMP, and WBMP) Assets 지정 pubspec.yaml을 사용하여 지정함. pubspec.yaml 파일에 있는 명시적 경로 (파일에 상대적인 경로)로 지정됨. a.. 이전 1 다음
