가을기 Workspace

main.dart import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class SliverPage extends StatefulWidget { @override State createState() => _SliverPage(); } class _SliverPage extends State { Widget customCard(String text) { return Card( child: Container( height: 120, child: Center( child: Text( text, style: TextStyle(fontSize: 40), )), )); } @override Widget build(Build..

https://api.flutter.dev/flutter/animation/Curves-class.html 페이지 이동할 때 애니메이션을 적용하기 위해 Hero 위젯을 이용한다. Hero 위젯은 페이지 간 이미지를 자연스럽게 애니메이션으로 연결해준다. 환경 준비 flutter: # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true # To add assets to your application, add an assets section,..

플러터에서 앱의 데이터를 저장하는 방법 중, SharedPreference를 사용해서 간단한 데이터를 저장한다. 환경 준비 dependencies: flutter: sdk: flutter shared_preferences: ^2.0.6 코드 import 'package:flutter/material.dart'; import 'package:shared_preferences/shared_preferences.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context..

https://medium.com/@icelancer/flutter-navigator-1-basic-e300efb24543 flutter의 Navigator는 스택을 이용해 페이지를 관리할 때 사용하는 클래스이다. main.dart import 'package:flutter/material.dart'; import 'package:subpage_example/page/first.dart'; import 'package:subpage_example/page/second.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @overrid..

앱을 만들다 보면 모든 내용과 기능을 한 화면에 보여줄수 없을 떄가 많다. 각 화면을 탭으로 연결한 탭바를 이용해 관련 있는 내용끼리 묶을 수 있겠다. 메인 화면에서 탭을 눌러 화면을 이동할 수 있으므로 좀 더 직관적인 앱을 만들 수 있다. main.dart 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', them..

앱을 사용하다 보면 용량이 큰 파일을 내려받아야 할 때가 있다. 유저는 파일을 내려받을떄 까지 기다려야하는데, 화면에 아무런 정보가 표시되지 않는다면 앱이 멈춘것으로 생각할 수 있다. 파일을 내려받을 때 진행 상황을 표시해줄 필요가 있다. 환경 준비 dio: 파일을 내려받는 패키지 path_provider: 내부 저장소 패키지 dependencies: flutter: sdk: flutter dio: ^4.0.0 path_provider: ^2.0.2 화면 코드 import 'dart:io'; import 'package:dio/dio.dart'; import 'package:flutter/material.dart'; import 'package:path_provider/path_provider.dart'..

https://fonts.google.com/ 구글 폰트 홈페이지에서 google_fonts 라이브러리는 google styled_widget과 같이 손쉽게 로고를 만들어보자. dependencies: flutter: sdk: flutter styled_widget: ^0.3.1 google_fonts: ^2.1.0 import 'package:flutter/material.dart'; import 'package:styled_widget/styled_widget.dart'; import 'package:google_fonts/google_fonts.dart'; class Logo extends StatelessWidget { @override Widget build(BuildContext context..

styled_widget은 Dart 2.7.0 부터 소개된 extension method 기능을 활용해 메서드로 flutter의 위젯 트리를 간단하게 만들어주는 라이브러리다. flutter 개발이 손쉬워진다. 레딧: https://www.reddit.com/r/FlutterDev/comments/e254mv/flutter_equivalent_of_swiftui/ Github: https://github.com/ReinBentdal/styled_widget 예제 styled_component를 활용한 코드 예제 Icon(OMIcons.home, color: Colors.white) .padding(all: 10) .decorated(color: Color(0xff7AC1E7), shape: BoxShape..