📱 Mobile 검색 결과

해당 글 46건

Expanded class를 활용한 레이아웃

Expanded class - widgets library - Dart API A widget that expands a child of a Row, Column, or Flex so that the child fills the available space. Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., horizontally for a Row or ve api.flutter.dev 다음과 같이 이미지를 불러오는 경우, 이미지가 모바일에 비해 크면 overflow가 일어납니다. overflow를 해결하기 위해서 강제라고 wid..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 17. 02:51

google font in flutter

플러터에서 google font를 써보자. 공식 문서 중에서는 다음 글을 참고하면 되겠다. Use a custom font How to use custom fonts. flutter.dev css를 link했던 웹 환경과 달리 직접 폰트를 다운로드 받아야 한다. 최상위 경로에 fonts라는 폴더를 생성한 후 tts를 전부 넣어줍시다. 그 후 pubspec.yaml에서 font를 활성화해주도록 합시다. 저는 Bold와 Regular만 설정했습니다. 그것만 쓸거거든요. 그 외의 다른 폰트들도 사용하고 싶다면 추가하면 됩니다. flutter: uses-material-design: true fonts: - family: LobsterTwo fonts: - asset: fonts/LobsterTwo-Regula..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 16. 23:18

앱 아이콘 변경하기

https://appicon.co/ App Icon Generator Generate icons and images for mobile apps, android and iOS. No need to upload or download. Works on your browser appicon.co flutter에서 앱 아이콘을 변경하기 위해서는 adroid, ios 경로에 들어가 직접 수정해주어야 합니다. 위 사이트를 통해 작업한 png나 jpg 등 이미지 파일을 변환한 후에 플러터 프로젝트에 넣어 봅시다. 안드로이드 android>app>src>main>res 의 파일들을 교체하면 됩니다. 우클릭한 후에서 show in explorer를 누르면 폴더에서 열 수 있습니다. 이제 위 사이트에서 준 폴더를 덮어쓰기..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 16. 02:17

컬렉션(Collection)과 제네릭(Generic)

MongoDB에서 컬렉션이 데이터 집합을 말하듯 Flutter에서도 컬렉션이란 데이터를 가지고 있는 자료 구조를 말합니다. 제네릭이란 컬렉션이 가지고 있는 데이터들의 타입을 지정하여 코드의 안정성, 재사용성을 가능하게 만들어줍니다. 제네릭은 flutter 뿐만 아니라 TS에서도 사용해 본 경험이 있을 것입니다. 아래의 예시에서 List라는 컬렉션 내부의 요소로 들어갈 수 있는 타입을 제네릭을 이용해 제한해 두었습니다. void main() { List number = new List(); number.add(2); // 오류 ! int 값이 아님 number.add("test"); print(number); } 플러터가 사전에 정의해 둔 여러가지를 살펴보면 이러한 제네릭이 빈번하게 사용됨을 알 수 있습니..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 15. 16:18

Navigation and routing

Navigator.push Navigator.pop Navigator.pushNamed 이 외에도 pushReplacement 등 다양한 메서드가 있습니다. 히스토리 관리를 위해서 적절하게 사용합시다. 쿡북을 참고하는게 제일 좋다. Navigate to a new screen and back How to navigate between routes. flutter.dev 사용한 위젯의 상세는 다음 링크에서 참조하자. https://flutter.dev/docs/development/ui/navigation https://api.flutter.dev/flutter/widgets/Navigator-class.html 모바일 앱은 일반적으로 페이지를 통해 콘텐츠를 보여줍니다. Flutter에서 이러한 요소를 R..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 15. 12:11

fluttertoast 라이브러리를 이용한 toast 구현

snackbar가 flutter에 내장되어있는 반면 toast는 없기 때문에 외부 라이브러리를 사용해야 한다. fluttertoast | Flutter Package Toast Library for Flutter, Easily create toast messages in single line of code pub.dev 설치는 공식 문서를 참고하고, 바로 활용해봅시다. import 'package:flutter/material.dart'; import 'package:fluttertoast/fluttertoast.dart'; import 'MyHomePage.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // T..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 15. 10:38

BuildContext, builder를 이해하기 위한 SnackBar

BuildContext는 위젯 트리에서 현재 위젯의 위치를 알 수 있는 정보이다. 다음은 플러터 프로젝트를 실행하면 자동으로 작성되어 있는 코드인데, BuildContext가 있음을 확인할 수 있다. Dart 문법에 의하면, build 함수는 Widget을 리턴하며 context라는 변수는 BuildContext 타입임을 알 수 있다. int plus (int a int b) { return a+b } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter De..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 15. 08:25

Widget 정리 (상시 업데이트)

공식 문서를 찾는 것도 도움이 되지만 플터러 상에서 ctrl + click으로 속성들을 찾아 보는 것이 더 빠르다. 하지만 더 빠른 건 이미 알고 있는 것이다. 가급적 기억하려고 자주 쓰는 걸 정리해두었다. * single-child widget과 multi-child widget을 구분할 줄 알아야 합니다. Container는 대표적인 single-child widget인 반면, Row, Column은 multi-child widget입니다. * https://api.flutter.dev/flutter/widgets/widgets-library.html 모든 위젯을 살펴보실 수 있습니다. 엄청 많습니다 ㄷㄷ * sysocoder.com/498-2/ Flutter List 클래스 정리 - Scaffold..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 15. 00:31

속성 정의가 길어질 때 Widget 분리

1. 함수형 MyHomePage의 Widget 부분 중 body가 너무 길어 내부에 Widget으로 분리하였다. import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePla..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 14. 23:36

Firebase (flutterfire) 소개 및 앱 등록

https://firebase.flutter.dev/ FlutterFire | FlutterFire The official Firebase plugins for Flutter firebase.flutter.dev 문서에서 Firebase에서 사용할 수 있는 모든 서비스를 확인할 수 있습니다. 그러나 가급적 authentication / Cloud Firestore(채팅서버, 리얼디비) 를 제외하고는 직접 백엔드를 구축해서 구현하기를 권장합니다. 백엔드를 의존하게 되면 실력이 안 오르기 때문입니다. 우선 파이어베이스 콘솔로 이동하여 firebase 가입 및 사용하고자 하는 프로젝트를 등록합니다. 우선은 안드로이드로 진행하겠습니다. 등록 과정에서 android>app>src>main>AndroidManife..
📱 Mobile/🔥 Firebase + Flutterfire 2020. 5. 14. 15:59