Flutter/Concept

[ Flutter ] 스트림

Stream이란? 💬 스트림은 데이터나 이벤트가 들어오는 통로다. 💬 앱을 만들다보면 데이터를 처리할 일이 많은데, 어느 타이밍에 데이터가 들어올 지 알기 어려운 것을 비동기 작업으로 처리할 때 스트림이 사용된다. 💬 간단한 예를 통해 스트림을 이해해보자. import 'dart:async'; void main() { // 1초마다 데이터 1개를 최대 5개까지 만듦 Stream stream = Stream.periodic(Duration(seconds: 1), (x) => x).take(5); // 이벤트 처리 stream.listen(print); } ◽ 스트림은 한쪽 끝에서 데이터를 보내고 다른 쪽에서는 보낸 데이터를 받을 수 있는 파이프와 같다. ◽ 스트림은 기본적으로 Single Subscript..

[ Flutter ] 리스트

SingleChildScrollView 💬 SingleChildScrollView는 하나의 자식 위젯만 가질 수 있다. 💬 Column을 자식 위젯으로 설정하면 표시할 위젯의 크기만큼 가로 길이를 가지며, ListBody를 사용하면 스크롤 가능 영역이 가로로 꽉 차기 때문에 사용자가 스크롤하기 더 쉬워진다. 예제 더보기 final items = List.generate(100, (i) => i).toList(); // 0부터 99까지의 값을 갖는 리스트 생성 SingleChildScrollView( child: ListBody( children: items.map((i) => Text('$i')).toList(), ), ), ListView, ListTile 💬 SingleChildScrollView와 ..

[ Flutter ] 화면 표시

Icon 💬 머티리얼 디자인용 기본 아이콘들은 Icons 클래스에 상수로 미리 정의되어 있다. Icon( Icons.home, color: Colors.red, size: 60.0, // 기본값 24.0 ), Progress 💬 로딩 중이거나 오래 걸리는 작업을 할 때 사용자에게 진행 중임을 보여주는 용도로 사용하는 위젯이다. CircularProgressIndicator() ◻️ 둥근 형태의 프로그레스바이며, 다른 화면 위에 겹쳐서 표시하므로 Stack 위젯으로 겹쳐서 사용한다. LinearProgressIndicator() ◻️ 선 형태의 프로그레스바이다. RefreshIndicator RefreshIndicator( child: _widgets, onRefresh: _refresh, ), 💬 당겨서..

[ Flutter ] 텍스트

Text Text( 'Hello World', style: TextStyle( fontSize: 30.0, // 글자 크기 fontStyle: FontStyle.italic, // 이탤릭체 fontWeight: FontWeight.bold, // 볼드체 color: Colors.blue, // 색상 letterSpacing: 4.0, // 자간 ), ), SelectableText 💬 드래그 할 수 있는 텍스트를 만들고 싶을 때 Text 위젯 대신 SelectableText로 변경하면 된다. TextSpan 💬 서로 다른 스타일을 가진 Text를 한 문단으로 화면에 그리도록 만든다. Text.rich( TextSpan( children: [ TextSpan( text: "Flutter ", style: ..

[ Flutter ] 플랫폼 대응

플랫폼 가로, 세로 크기 💬 디바이스, 플랫폼 별로 크기가 다를 경우를 고려하여 위젯의 크기를 결정해야 하는 경우 사용 // When in StatelessWidget @override Widget build(BuildContext context) { final Size screenSize = MediaQuery.of(context).size; final double width = screenSize.width; final double height = screenSize.height; } ◻️ StatelessWidget 내부에서 context를 사용할 때는 build 함수 안에 작성하거나, Widget _buildSub() { return Builder( builder: (BuildContext con..

[ Flutter ] 이미지

Image 네트워크에 있는 이미지 표시하기 Image.network('http://bit.ly/2Pvz4t8') Asset 이미지 호출하기 Image.asset('assets/sample.jpg') pubspec.yaml flutter: assets: - assets/ 💬 flutter packages get 💬 이미지를 asset에 추가하고 핫 리로드 시 적용이 되지 않으며, 프로젝트를 종료 후 다시 빌드를 해야 한다. 이미지 Box.fit // 원본. 가로세로 비율 변화 없음 Image.asset('images/flutter.png', fit: BoxFit.contain), // 지정한 영역을 꽉 채우며, 비율이 변경된다. Image.asset('images/flutter.png', fit: BoxF..

[ Flutter ] BottomNavigationBar

Read me 💬 IndexStack과 BottomNavigationBar를 사용한 네비게이션 바 앱 구조 만들기 Code import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class MainScreens extends StatefulWidget { @override _MainScreensState createState() => _MainScreensState(); } class _MainScreensState extends State { // 사용자가 하단 아이콘 버튼을 눌렀을 때 위젯의 index 값을 저장하는 변수 int _selectedIndex = 0; @override Widget build(Buil..

[ Flutter ] HTTP 통신

POST 💬 서버에 요구하는 포맷에 맞춰 서버로 데이터를 전송하고, 때에 따라 서버에서 회신하는 Response를 받는 작업 예제 💬 두 개의 입력을 받을 수 있는 TextField 💬 값을 입력 후 FloatingButton을 클릭 시 웹 서버에 입력한 값을 지정한 포맷으로 post 후 response를 받아서 화면에 띄워준다. 모델 클래스 만들기 https://app.quicktype.io/ Instantly parse JSON in any language | quicktype app.quicktype.io 💬 response로 받을 Json 데이터의 포맷에 맞는 예시 데이터를 화면 왼편에 적으면 오른편에 Json에서 String까지의 인코드, 디코드 코드가 포함된 클래스가 만들어지며, 이를 사용하여..

[ Flutter ] Web 배포 using GitHub

💬 깃허브를 사용하여 Flutter 코드를 Web으로 배포하는 방법에 대해서 알아보도록 하자. 💬 우선, 깃허브 홈페이지에서 새로운 Repository를 생성한다. ◻ name을 '깃허브 닉네임.github.io'로 생성한다. 💬 아래의 작업들을 안드로이드 스튜디오와 안드로이드 스튜디오 내부의 터미널에서 차례대로 진행된다. flutter channel master ◻ Flutter의 채널을 master 채널로 설정한다. flutter upgrade ◻ 현재 Flutter 채널에서 사용할 수 있는 최신 버전의 Flutter SDK를 가져온다. ◻ 이후 앱이 의존하는 패키지를 최신 호환 버전으로 업데이트한다. flutter config --enable-web flutter devices ◻ 플러터 웹을 개발..

[ Flutter ] 화면 이동

새로운 화면으로 이동 💬 화면 전환을 하는 네비게이션 앱을 만들기 위해 기반이 되는 소스 코드를 작성하자. 더보기 더보기 import 'package:flutter/material.dart'; // 앱 시작 부분 void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: FirstPage(), )..