📱 Mobile 검색 결과

해당 글 46건

TextField를 통해 입력받은 값을 다른 페이지에 전달하기

간단히 다음과 같은 TextField의 onChanged를 통해 입력한 값을 cityName이란 변수에 저장해두었고, FlatButton을 눌러서 다음으로 이동(pop 메서드니 정확히는 현 페이지 제거)하는 페이지에 cityName 변수를 전달합니다. String cityName; Container( child: TextField( onChanged: (value) { cityName = value; }, ... 중략 FlatButton( onPressed: () { Navigator.pop(context, cityName); }, 해당 페이지의 전 페이지의 Navigator를 통해 입력된 값을 받을 수 있습니다. Future이니 async/await처리를 해줍시다. FlatButton( onPresse..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 22. 15:10

API 통신을 위한 http 패키지 및 json 활용 + Loader(spinner)

최근에는 Dio를 사용하고 있습니다. 왜냐하면 디코드가 필요 없거든요. DIO returns decoded MAP. not required to decode Axios나 fetch를 이용해서 브라우저 상에서 api와 통신을 하듯, flutter에서는 http 패키지를 통해 api와 통신한다. 데이터 페칭을 위한 flutter의 cookbook을 먼저 읽어봅시다. (https://flutter.dev/docs/cookbook/networking/fetch-data) (https://pub.dev/documentation/http/latest/) 패키지는 (https://pub.dev/packages/http) 에서 받을 수 있다. 간단하게 다음과 같이 작성해보았습니다. import 'package:flut..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 22. 04:45

stful 위젯의 lifecycle

React에서 컴포넌트가 생명주기가 있듯이 flutter의 위젯에도 생명주기가 있다. stless의 경우에는 라이프사이클이라고 볼 것이 없다. 상태에 즉각적으로 반응하지 않으며, 처음 한 번 빌드됩니다. 따라서 아무 문제가 없습니다. 반면 stful의 경우에는 state의 변화를 감지하고, 이에 따라 라이프사이클을 이용할 여지도 많다. (특정 페이지에 접속하자마자 위치 정보를 받아오는 등의 작업을 생성 초기에 배정하는 등...) 또한, stful은 히스토리를 이동해서 보이지 않게 되더라도 무조건 build되기 때문에 네트워크 통신 등 복잡한 로직을 build 메서드 내에서 처리하게되면 매번 해당 동작을 반복하게 됩니다. 화면을 이동할 때마다 모든 네트워크 통신이 이루어진다고 생각한다면.... 따라서 이런..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 21. 14:36

빠른 코딩을 위한 상수 전용 페이지 구성과 .copywith 메서드

공통적으로 적용하는 스타일, 상수들을 따로 모아두는 파일을 하나 만드는 게 도움이 된다. constants.dart라는 파일에 여러 상수와 스타일 등등을 모아 두었다. 너무 당연한 말이지만 반드시 const로 선언할 필요는 없다. 연산을 처리하는 green[800] 같은 것을 사용하려면 final로 선언해야 한다. 여기서 하나 체크할 점은 모든 변수 앞에 소문자 'k'를 붙인 것이다. 이건 나만의 버릇이 아니라 구글 flutter팀에서 적용하는 공통된 코딩 컨벤션이다. (베이스 파일을 까보면 나온다) 일관성을 위해 지켜주도록 하자. import 'package:flutter/material.dart'; const kTextStyle labelTextStyle = TextStyle(color: Color(..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 20. 14:50

커스텀 위젯 만들기

다음과 같이 작성했다고 가정해보자. 한 화면에 여러 FAB가 들어가는 건 추천하지 않는 바이고 (공식 문서에 따르면 그렇다) 비슷한 위젯이 연속해서 2개 들어갔다. 만약 앞으로도 비슷한 위젯을 여기저기서 써야 한다면 커스텀 위젯을 만드는 방법을 고려해보자. Row( mainAxisAlignment: MainAxisAlignment.center, children: [ FloatingActionButton( onPressed: () {}, child: Icon( Icons.add, ), ), SizedBox( width: 20, ), FloatingActionButton( onPressed: () {}, child: Icon(Icons.add), ), ], ) 커스텀위젯을 만들기 위해서 우리는 가급적 RAW..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 19. 08:36

변수 Final (runtime) vs Const (compile-time constants)

쉽게 정리하면 다음과 같다 코드 실행의 결과로 인해 결정되는 상수는 final 코드 실행 이전부터 결정되어야 하는 상수는 const => DateTime.now()와 같이 실행의 결과로 나오는 값 사용 불가 구분하기 어려우면 그냥 final을 쓴다고 생각하자. immutable하다는 것은 바뀌면 안된다는 것이다. 따라서 뭔가 바꾸려면 기존에 있던 값을 아예 날리고 새로 만들어서 대체해야 한다는 것이다. 이를 플러터에 적용해보자면 stateless 위젯은 immutable이다. stateful 위젯은 mutable이다. 따라서 satateless 위젯에 사용하는 변수가 있다면 해당 값은 한 번 지정되면 바뀌지 않아야 한다. 이 경우 해당 변수의 타입에 final을 붙여줘야 한다. 즉, stless 위젯은 ..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 18. 16:22

Theme, ThemeData 살펴보기 + Hex 값으로 Color 사용하기

ThemeData 살펴보니 ThemeData.dark()를 통해서 나이트 모드를 만들기에 좋아 보인다. 다른 프레임워크 같았으면 일일히 배경색을 바꿔야 했을 것이다. ThemeData class - material library - Dart API Holds the color and typography values for a material design theme. Use this class to configure a Theme or MaterialApp widget. To obtain the current theme, use Theme.of. Sample This sample creates a Theme widget that stores the ThemeData. The ThemeData can api..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 18. 13:18

캡슐화를 위한 변수 private화 (은닉화)

OOP의 원칙 중 하나인 캡슐화에 따르면 클래스로 분리한 실제 구현 내용 일부를 외부로 부터 감추어 은닉할 필요가 있다. 아래 예시와 같은 다음과 같은 코드가 있을 때, 앞에 _가 붙은 변수는 해당 클래스 내부에서만 사용할 수 있게 된다. (private) 따라서 해당 클래스 외부에서 인스턴스를 만들어 활용할 때, 변환할 수 없게 된다. 즉, Quiz instance = new Quiz(); instance._questionNum = 4; 와 같은 조작이 불가능하게 되는 것이다. import 'questions.dart'; class Quiz { int _questionNum = 0; List _questionBank = [ Questions('Some cats are actually allergic t..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 18. 06:42

내장 assets 오디오 파일 재생하기

오디오 플레이어의 종류는 상당히 많지만 아래 패키지의 점수가 가장 높고 (99점) 편리해서 사용해보았습니다. audioplayers | Flutter Package A flutter plugin to play multiple audio files simultaneously pub.dev Both for Remote Files or Local Files, use the play method, just setting appropriately the flag isLocal. For Local Assets, you have to use the AudioCache class (see below). 로컬 파일이나 원격 파일을 재생하기 위해서는 play 메서드를 사용하되 isLocal 값을 true로 주라고 예시가 ..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 17. 10:55

dart 내장 라이브러리 : dart:math library

dart:math library - Dart API dart:math library Mathematical constants and functions, plus a random number generator. To use this library in your code: import 'dart:math'; Classes MutableRectangle A class for representing two-dimensional axis-aligned rectangles with mutable properties. api.flutter.dev import 'dart:math'; import한 후에 사용할 수 있는 상수와 함수는 다음과 같다. Constants e → const doubleBase of the na..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 17. 04:54