그냥 개발자 노트

AnimatedOpacity 투명도를 조절하고 싶다면 AnimatedOpacity를 사용 합니다. Flutter 기본 프로젝트에서 텍스트 부분만 Opacity를 적용해 봤습니다. AnimatedOpacity( duration: const Duration(milliseconds: 300), opacity: _counter%2==0?0.2:1, child: const Text( 'You have pushed the button this many times:', ), ), duration은 전환 시간으로 300 milliseconds 즉 0.3초 입니다. opacity는 투명도입니다. 여기서는 0~1 사이의 실수. 그래서 버튼을 누를떄마다 투명해졌다 진해졌다 전환하게 됩니다. 테스트 해보면 코드대로 잘 동작하..

앱을 만들다 보면 갤러리(사진첩)에서 이미지를 선택해야 할 일이 생깁니다. 이 경우를 알아보겠습니다. 우선 필요한 패키지는 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..

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에는 리스트 내부에 리스트가 또 있는것을 확인 하였습니다 ...?으로 널체크 가능 합니다.

StatelessWidget을 상속받아 커스텀 위젯을 만들 수 있습니다. 당연히 여러 방면에서 쓰일수 있고 전체 코드양을 줄이며 재활용 하기 편하기 떄문에 다른 언어에서도 많이 사용 하는 방법 입니다. https://aostols.tistory.com/16?category=564017 Flutter - StatelessWidget / StatefulWidget StatelessWidget 간략히 설명하자면 한번 그려지고 나면 다시 그려지지 않습니다. 예를 들어서 단순히 이미지 + 버튼 링크만 있는 상황이라면 언제나 링크만 동작하면 되기 때문에 이럴때 StatelessWidge aostols.tistory.com 기존 코드를 약간 변형해서 사용 해 봅시다. import 'package:flutter/mat..

StatelessWidget 간략히 설명하자면 한번 그려지고 나면 다시 그려지지 않습니다. 예를 들어서 단순히 이미지 + 버튼 링크만 있는 상황이라면 언제나 링크만 동작하면 되기 때문에 이럴때 StatelessWidget을 사용 합니다. 데이터에 의해 값이 변경되지 않을 경우 사용합니다. StatefulWidget 데이터가 변경되면 위젯을 다시 그릴때 사용 합니다. 위젯에 연결된 데이터가 변경되어 위젯 자체의 업데이트가 필요하다면 setState()를 호출하여 build()를 다시 호출 해 줍니다. 이를 통하여 위젯 자체를 다시 그려주게 됩니다. 다시 말하면 위젯에 연결된 변수 업데이트 한다고 build()가 다시 호출되는 것은 아니고 setState()를 호출해야 build()가 호출됩니다. 크게 생각..

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키를 누르고 환경 변수를 검색하면 위와 같은 항목을 선택 해 줍니..