๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๋ฐ˜์‘ํ˜•

๐Ÿ“ฑMobile/๐Ÿ”ฅFlutter11

[Flutter] ํ”Œ๋Ÿฌํ„ฐ http GET, POST ์‚ฌ์šฉํ•˜๊ธฐ, ์š”์ฒญ(Request), ์‘๋‹ต(Response) project/pubspec.yaml http: 0.12.2 ์ถ”๊ฐ€ํ•œ๋‹ค. dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.3 http: 0.12.2//add dev_dependencies: flutter_test: sdk: flutter Session ์ œ์–ด๋ฅผ ์œ„ํ•ด ํด๋ž˜์Šค๋ฅผ ๋งŒ๋“ค๊ณ  ๊ทธ ์•ˆ์—์„œ ํ—ค๋” ์ฟ ํ‚ค ๋“ฑ ์…‹ํŒ…, ๋ฆฌ์Šคํฐ์Šค์˜ ์‘๋‹ต์„ ๊ฐ ์ƒํƒœ์ฝ”๋“œ์— ๋”ฐ๋ผ์„œ ์–ผ๋Ÿฟ์„ ๋„์šฐ๋Š” ๋“ฑ์˜ ์ž‘์—…๋ถ„๊ธฐ๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค. Session ํด๋ž˜์Šค๋ฅผ ์ƒ์„ฑํ•œ๋‹ค. impor.. 2023. 7. 4.
[Flutter] ๊ฐ„๋‹จํ•œ ์•ฑ ๋งŒ๋“ค๊ธฐ (provider pattern, translator(google ๋ฒˆ์—ญ), ChuckNorris(19joke json api), jsontoclass) ChuckNorris ๋ผ๋Š” 19์„ธ ๋†๋‹ด์„ ๋˜์ ธ์ฃผ๋Š” json api๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ rest api๋ฅผ ์‚ฌ์šฉํ•ด์„œ ํ™”๋ฉด์— ๋ฟŒ๋ ค์ง€๋Š” ๊ฐ„๋‹จํ•œ ์–ดํ”Œ์„ ๋งŒ๋“ค์–ด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์šฐ์„  JSON To Dart Class (JsonToDartClass)๋ฅผ ์„ค์น˜ํ•˜์—ฌ์ค๋‹ˆ๋‹ค. ์ด๋Ÿฐ๊ฒŒ ํ”Œ๋Ÿฌ๊ทธ์ธ์œผ๋กœ ์žˆ๋Š”์ง€ ๋ชฐ๋ž๋Š”๋ฐ.. ๋งค์šฐ ์ข‹์Šต๋‹ˆ๋‹ค!!! ์งฑ์งฑ json ํ˜•์‹์„ dart class ๋กœ ๋ฐ”๊พธ์–ด์ง‘๋‹ˆ๋‹ค. ์›ํ•˜๋Š”๋Œ€๋กœ ๋ฐ”๊พธ์–ด์ง€์ง€ ์•Š์„ ์ˆ˜ ์žˆ์ง€๋งŒ ๋ช‡๊ฐœ๋งŒ ์ถ”๊ฐ€ํ•˜๋ฉด๋˜์„œ ๋ฌด์กฐ๊ฑด ์ด ๋ฐฉ์‹์ด ์ข‹์Šต๋‹ˆ๋‹ค. ๋จผ์ € provider, http, translator ์ด๋ ‡๊ฒŒ 3๊ฐ€์ง€๋ฅผ ์ถ”๊ฐ€ํ•ด์ค๋‹ˆ๋‹ค. provider ํŒจํ„ด์„ ์ด์šฉํ• ๊ฒƒ์ด๊ณ  http๋กœ json response๋ฅผ ๋ฐ›์„๊ฒƒ์ด๊ณ  translator๋กœ ์˜์–ด๋กœ๋œ๊ฒƒ์„ ํ•œ๊ธ€๋กœ ๋ฒˆ์—ญํ• ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํŒŒ์ผํŠธ๋ฆฌ์ž…๋‹ˆ๋‹ค. ์ €๋Š” ์—ฐ์Šต์žฅ .. 2021. 1. 8.
flutter ํ”„๋กœ๊ทธ๋ ˆ์Šค๋ฐ” progress bar circle progress bar example flutter ๊ธฐ๋ณธ ProgressBar๋Š” ๊ตฌ๊ธ€๋งํ•˜๋ฉด ์‰ฝ๊ฒŒ ์ฐพ์„ ์ˆ˜ ์žˆ๋‹ค. ์œ„ ๋‘๊ฐœ์˜ ๊ฒฝ์šฐ ๋งค์šฐ ๊ฐ„๋‹จํ•œ๋ฐ ์‚ฌ์šฉํ• ๋• Stack์— ๋„ฃ์–ด์„œ ๋งจ ์ƒ๋‹จ์— ์Œ“์•„์ฃผ๋ฉด ๋œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ฐ€์ ธ์™€์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋“ค์ด ์žˆ๋‹ค. flutter_spinkit ์„ ์‚ฌ์šฉํ•ด๋ณด๋„๋ก ํ•˜์ž. ๋งค์šฐ ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ์ ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค. ๋‹จ์ˆœ ํ”„๋กœ๊ทธ๋ ˆ์Šค ์• ๋‹ˆ๋ฉ”์ด์…˜์ธ๋ฐ LIKES๊ฐ€ ์ด๋ ‡๊ฒŒ ๋†’์„ ์ค„์€ ๋ชฐ๋ž๋‹ค. ๋จผ์ € pubspec.yaml์— ์ถ”๊ฐ€ํ•ด์ฃผ์ž. dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertin.. 2021. 1. 8.
flutter secure storage, ์ž๋™๋กœ๊ทธ์ธ, android KeyStore example flutter secure storage๋ฅผ ์‚ฌ์šฉํ•œ ์ž๋™๋กœ๊ทธ์ธ์„ ํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค. ๊ณ„์ •์€ ํ•˜๋‚˜๋งŒ ์‚ฌ์šฉํ•˜์ง€์•Š๊ณ  ์—ฌ๋Ÿฌ๊ณ„์ •์„ ์‚ฌ์šฉํ•˜๋„๋ก ํ•˜๊ฒ ๋‹ค. ๋””๋ฒ„๊น…์„ ๋งŽ์ด ํ•ด๋ณด์ง€ ์•Š์•˜๋‹ค. ๋Œ€์ถฉ ์ด๋Ÿฐ ์‹์ด๋‹ค ๋ผ๊ณ ๋งŒ, ์ด๋ ‡๊ฒŒ ์‚ฌ์šฉํ•˜๋Š” ์‹์ด๋ผ๋Š”๊ฒƒ๋งŒ ๋Œ€์ถฉ ๋ณด๊ณ  ๋„˜์–ด๊ฐ€๋ฉด ๋ ๊บผ๊ฐ™๋‹ค. flutter secure storage flutter์—์„œ ๊ฐ ํ”Œ๋žซํผ(android, ios)์˜ ๋‚ด๋ถ€์ €์žฅ์†Œ(keychain or keystore)๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‹ค! iOS์—์„œ๋Š” ์‚ฌ์šฉํ•ด๋ณด์ง€ ์•Š์•˜์ง€๋งŒ Keychain์ด๋ผ๋Š” ๊ฒƒ์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š”๊ฒƒ ๊ฐ™๋‹ค. android keystore๋Š” ์‚ฌ์šฉํ•ด๋ณธ์ ์ด ์žˆ๋‹ค. ์•ˆ๋“œ๋กœ์ด๋“œ๋Š” ๋ฃจํŒ…ํ•˜๊ธฐ ์‰ฌ์šด ์šด์˜์ฒด์ œ์—ฌ์„œ Shared Preference ๊ฐ™์€ ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋‚ด๋ถ€ ์ €์žฅ์†Œ๋“ค์€ ๊ฐ„๋‹จํ•œ ๋ฃจํŒ…๊ณผ์ •๋งŒ ๊ฑฐ์ณ๋„.. 2021. 1. 7.
[Flutter] provider + [Change Notifier] ๋ฅผ ์‚ฌ์šฉํ•œ Provider Pattern example ์ด๋•Œ๊นŒ์ง€ ๋‹ค์–‘ํ•œ BLOC ํŒจํ„ด์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด๋ณด์•˜๋‹ค. ํ•˜์ง€๋งŒ BLOC์˜ ๋กœ์ง ๋ถ„ํ• ์„ ์œ„ํ•œ ๋‹ค์ˆ˜์˜ ํด๋ž˜์Šค ์ƒ์„ฑ์œผ๋กœ ์ธํ•ด ๋ณต์žก์„ฑ ๋ฌธ์ œ๊ฐ€ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— 2019๋…„ Google์—์„œ ์ ๊ทน ์ถ”์ฒœํ•œ Provider Pattern์„ ์‚ฌ์šฉํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค. ๊ตฌ๊ธ€์—์„œ ๋งŒ๋“ ๊ฒƒ์€ ์•„๋‹ˆ๊ณ  ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ์˜ฌ๋ผ์˜จ๊ฒƒ์ด๋ผ๋Š”๋ฐ ๊ตฌ๊ธ€์—์„œ ์ ๊ทน ์ถ”์ฒœ์„ ํ•œ ๊ฒƒ์ด๋ผ๊ณ  ํ•œ๋‹ค. ๋˜ํ•œ BLOC๊ฐ€ ๋‹ค์ˆ˜์˜ ํด๋ž˜์Šค๋กœ ๋ณต์žกํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์•„์— ์“ฐ์ง€ ์•Š๋Š”๊ฒƒ์€ ์•„๋‹ˆ๋‹ค. ์–ด๋Š์ •๋„ ๊ทœ๋ชจ๊ฐ€ ์žˆ๋Š” ํ”„๋กœ์ ํŠธ๋Š” BLOCํŒจํ„ด์„ ์‚ฌ์šฉํ•˜์—ฌ ์ •ํ™•ํ•œ ๋กœ์ง๋ถ„๋ฆฌ๋ฅผ ํ•˜๋Š”๊ฒƒ์ด ๋ถ„๋ช…ํžˆ ๋” ์ข‹์„๊ฒƒ์œผ๋กœ ๋ณด์ธ๋‹ค. ์†Œ๊ทœ๋ชจ์— Provider, ์ค‘๊ทœ๋ชจ์— Provider, Bloc, ๋Œ€๊ทœ๋ชจ์— Bloc ๊ฐ€ ๋งž์ง€ ์•Š์„๊นŒ ์‹ถ๋‹ค. ํŠธ๋ฆฌ์ด๋‹ค. main.dart import 'package:flutter/founda.. 2021. 1. 6.
[Flutter] ๊ธฐ์ดˆ๊ฐ€ ๋˜๋Š” StreamBuilder BLOC ํŒจํ„ด, StreamSubscription, yield example ์ €๋ฒˆ์—๋Š” Cubit๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ BLOC ํŒจํ„ด์„ ์ œ์ž‘ํ•ด๋ณด์•˜๋‹ค. ํ›คํ•˜๊ฒŒ ๋ˆˆ์— ์ž˜ ๋ณด์ด๋Š” Cubit๋กœ ํ•„์š” ๋™์ž‘๋งŒ ๊น”๋”ํ•˜๊ฒŒ ์˜ต์ €๋น™ ํ–ˆ์ง€๋งŒ ์—ญ์‹œ๋‚˜ BLOC๋Š” ๋ณต์žกํ•˜๋‹ค. ์ด๋ฒˆ์— ์ž‘์„ฑํ•˜๋Š” StreamBuilder๋ฅผ ์‚ฌ์šฉํ•œ BLOC ํŒจํ„ด ๋˜ํ•œ ๋ณต์žกํ•˜๋‹ค. ๊ฒฐ๊ตญ ํ•˜๋‚˜์˜ ๊ธฐ๋Šฅ์„ ๋งŒ๋“ค๋ ค๋ฉด ํด๋ž˜์Šค๋ฅผ ์ตœ์†Œ 3, 4๊ฐœ๋ฅผ ๋งŒ๋“ค์–ด์•ผํ•˜๋‹ˆ ๋ฌธ์ œ์ด๋‹ค. ํŒŒ์ผํŠธ๋ฆฌ์ด๋‹ค. ๋กœ์ง์„ ๋‚˜๋ˆ„๊ณ , ์ด๋ฒคํŠธ์™€ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•œ๋‹ค. main.dart import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc_with_stream/ticke.. 2021. 1. 6.
[Flutter] Cubit๋ฅผ ์‚ฌ์šฉํ•œ BLOC ํŒจํ„ด, Bloc.observer example CUBIT๋ฅผ ์‚ฌ์šฉํ•œ BLOC ํŒจํ„ด Bloc.observer๋ฅผ BlocObserver๋ฅผ ์ƒ์†ํ•œ class๋กœ ์ดˆ๊ธฐํ™”ํ•ด์„œ onChange๋ฅผ overrideํ•ด์„œ ์ƒํƒœ๊ฐ€ ๋ณ€ํ• ๋•Œ๋งˆ๋‹ค print ํ• ๊ฒƒ์ด๊ณ  navigation push ๋„ ํ•ด๋ณผ ๊ฒƒ ์ž…๋‹ˆ๋‹ค. pubspec.yaml dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.0 bloc: ^6.1.0 //์ถ”๊ฐ€ flutter_bloc: ^6.1.0 //์ถ”๊ฐ€ counter_observer.dart .. 2021. 1. 4.
[Flutter] fluro package (navigation ์ด๋™, route, transition) sample code fluro ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ route๋ฅผ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค. arguments ์ •ํ•˜๋Š”๊ฒƒ๋„ ๊ฐ€๋Šฅํ•˜๊ณ  transitionType์„ ํ†ตํ•ด ์›ํ•˜๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๋ณด์ด๊ฒŒ, ์•ˆ๋ณด์ด๊ฒŒ ํ•  ์ˆ˜๋„ ์žˆ๋‹ค. pub.dev/packages/fluro fluro | Flutter Package Fluro is a Flutter routing library that adds flexible routing options like wildcards, named parameters and clear route definitions. pub.dev code sample ์ด๋‹ค. import 'package:flutter/material.dart'; import 'package:fluro/fluro.dart'; Handler _TestNativeH.. 2020. 12. 22.
[Flutter] flutter intro(splash) -> login page timer sample code flutter_example/widgets ํŒจํ‚ค์ง€๋ฅผ ํ•˜๋‚˜ ๋งŒ๋“ญ๋‹ˆ๋‹ค. main.dart import 'dart:async'; import 'package:flutter/material.dart'; import 'package:flutter_example/widgets/introPage.dart'; import 'package:flutter_example/widgets/loginPage.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, ti.. 2020. 10. 26.
[Flutter] Flutter ํ”Œ๋žซํผ ์ฑ„๋„์„ ์ด์šฉํ•ด์„œ Android ์ฝ”๋“œ ํ˜ธ์ถœํ•˜๊ธฐ (MethodChannel) ์ƒ์„ฑ์‹œ Paltform channel language ์ฒดํฌ ๋ชจ๋‘ ํ•ด์ œํ•˜๊ธฐ * ํ”Œ๋žซํผ ์ฑ„๋„์„ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ์žˆ์–ด์„œ ์ค‘์š”ํ•œ๊ฒƒ์€ Platform channel language๋ฅผ ์–ด๋–ค๊ฒƒ์„ ์‚ฌ์šฉํ• ๊ฒƒ์ธ์ง€์ด๋‹ค. Include Swift support for iOS code ๋ฅผ ์„ ํƒํ•œ ์ ์ด ์žˆ๋Š”๋ฐ Swift ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์‚ฌ๋žŒ์ด ์—†์–ด์„œ ๋‚ญํŒจ๋ฅผ ๋ณธ ์ ์ด ์žˆ๋‹ค. ํ”Œ๋žซํผ ์ฑ„๋„์„ ์‚ฌ์šฉํ•˜๋ ค๋ฉด java, kotlin, Objective-c, swift ๋ชจ๋‘ ์ˆ™์ง€ํ•ด ๋‘์–ด์•ผ ํ•œ๋‹ค. project/lib/main.dart import 'dart:async'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; class PlatformChannel.. 2020. 10. 25.
[Flutter] Flutter ์ƒ๋ช…์ฃผ๊ธฐ Sample Code main.dart import 'package:flutter/material.dart'; void main() => runApp(TestApp()); class TestApp extends StatelessWidget { TestApp() { print('TestApp TestApp() start'); print('TestApp TestApp() done'); } @override Widget build(BuildContext context) { print('TestApp build() start'); print('TestApp build() done'); return MaterialApp( title: 'StatefulWidget LifecycleApp', home: _FirstStatefulWidge.. 2020. 10. 25.
๋ฐ˜์‘ํ˜•