그냥 개발자 노트

앱을 만들다 보면 갤러리(사진첩)에서 이미지를 선택해야 할 일이 생깁니다. 이 경우를 알아보겠습니다. 우선 필요한 패키지는 image_picker 입니다. https://pub.dev/packages/image_picker image_picker | Flutter Package Flutter plugin for selecting images from the Android and iOS image library, and taking new pictures with the camera. pub.dev 선택하는 방법 자체는 아주 쉽고 간단합니다. static Future PickImage() async { return await ImagePicker().pickImage(source: ImageSource.g..

파파고 번역 Flutter 에서 파파고 번역을 사용하는 방법 입니다. https://www.ncloud.com/product/aiService/papagoTranslation NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification www.ncloud.com 일단 파파고 API 등록을 합니다. 이것은 다른곳에도 많이 알려져 있기 때문에 간략히 넘어가겠습니다. Flutter에서는 기본적으로 http 에관한것이 없기 때문에 패키지 추가 해야 합니다. pubspec.yaml을 열고 http를 추가 해 줍니다. Flutte..

화면 하단부에 임시로 잠시 뜨는 PC에서 팝업같은 처리를 하는 ModalBottomSheet를 알아 보겠습니다. flutter 기본 앱을 수정하여 floatingActionButton을 누르면 ModalBottomSheet가 뜨도록 하겠습니다. floatingActionButton은 화면 중앙 하단에 있는 +버튼 입니다. 이 버튼을 누르면 ModalBottomSheet가 뜨고 거기서 텍스트를 입력받으면 기본 화면의 "Sample Text"자리에 뜨도록 수정되는 간단한 구조 입니다. 일단 ModalBottomSheet에 뜰 위젯을 보겠습니다. import 'package:flutter/material.dart'; class BottomDialog extends StatefulWidget { final Fu..

Flutter에서 폰트나 이미지 등을 사용하는 방법을 확인 해 보겠습니다. 일단 적당한 폰트를 받아서 assets/fonts 폴더에 넣어줍니다. 전 무료폰트인 구글의 NotoSerif를 받아서 넣었습니다. 기본폰트가 고딕계열이라 Serif계열을 쓰면 폰트가 바뀐것을 쉽게 알 수 있습니다. 이제 새로운 Flutter 프로젝트를 생성합니다. 여기서 화면 중앙에 문구표시되는 부분이 있는데 약간만 수정합니다. children: [ Container( width: 300, child: const Text( 'You have pushed the button this many times:', style: TextStyle( fontSize: 30, ), ), ), Text( '$_counter', style: The..

Flutter 에는 다양한 위젯들이 있습니다. 이중에서 SingleChildScrollView, ListView를 간략히 알아 보겠습니다. https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html SingleChildScrollView class - widgets library - Dart API A box in which a single widget can be scrolled. This widget is useful when you have a single box that will normally be entirely visible, for example a clock face in a time picker, but you ne..

표시된 부분과 같이 버튼이 다수 존재 하는데 이것이 상황에 따라 달라질 경우 예를들면 A라는 사람에게는 2개, B라는 사람에게는 3개가 표시 되어야 할 상황이라면 위젯을 그냥 박아버리면 문제가 될 수 있습니다. 이때 Spread Operator 를 활용 할 수 있습니다. import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { var TextArray = ['Hello', 'World', 'ABCD']; void ButtonClick() { print('Button Click'); } // This widget is the root of your applicatio..

?? 좌측이 null이라면 우측을 리턴합니다. ??= 변수가 null 일 경우에만 변수에 우측값을 할당 합니다. 초기 할당에서는 null이기 때문에 3이 할당 되었지만 10을 할당 하려 했을 경우 null이 아니기 때문에 할당되지 않았습니다. ... Spread Operator 이라고 불리며 컬렉션의 값을 쪼개버립니다. ...을 썻을경우 list2 에는 값이 쪼개져서 할당 되었고 쓰지 않은 list3에는 리스트 내부에 리스트가 또 있는것을 확인 하였습니다 ...?으로 널체크 가능 합니다.

Flutter 은 Google 에서 만든 멀티 플랫폼 언어 입니다. 기존에는 Android 와 IOS를 커버 했지만 이제는 데스크탑 영역 및 웹도 커버 가능 합니다. 설치 하기 위해서는 가장 먼저 SDK를 받아야 합니다. 제가 Window10 이기 때문에 Window10 기준으로 설명 드리겠습니다. Install Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems. docs.flutter.dev 사이트에 가서 자신의 OS에 맞는 SDK를 받아 줍니다. 이후 path등록을 해 줘야 합니다. Win키를 누르고 환경 변수를 검색하면 위와 같은 항목을 선택 해 줍니..