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

๐Ÿ“ฑ Cross Platform/Flutter6

[Flutter] Flutter ๋ ˆ์ด์•„์›ƒ ์‰ฝ๊ฒŒ ์ดํ•ดํ•˜๊ธฐ - 1 (feat. Column,Row,MainAxisAlignment,CrossAlignment) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ๐Ÿ’ป ์ž…๋‹ˆ๋‹ค! ์ •๋ง ์˜ค๋žœ๋งŒ์— Flutter๋ฅผ ๋‹ค์‹œ ๊ณต๋ถ€ํ•˜๋Š”๋ฐ.. ๋ ˆ์ด์•„์›ƒ ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด iOS์™€๋Š” ๋‹ฌ๋ผ์„œ.. ํ—ท๊ฐˆ๋ฆฌ๋”๋ผ๊ตฌ์š”. ๊ทธ๋ž˜์„œ ๋ ˆ์ด์•„์›ƒ ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์‰ฝ๊ฒŒ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด์„œ ๊ธ€์„ ์ •๋ฆฌํ•ด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค! ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ Column ๋จผ์ € ์ปฌ๋Ÿผ ์œ„์ ฏ๋ถ€ํ„ฐ ๋‹ค๋ค„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ปฌ๋Ÿผ์€ "ํ–‰"์„ ๋œปํ•˜์ฃ ? ์ฆ‰, ์„ธ๋กœ๋กœ ์œ„์ ฏ๋“ค์„ ๋ฐฐ์น˜ํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์œ„์ ฏ์ž…๋‹ˆ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์ด ์•„๋ฌด๋Ÿฐ ์˜ต์…˜์„ ์ฃผ์ง€ ์•Š์œผ๋ฉด ์™ผ์ชฝ ์ƒ๋‹จ์— ๋ฐฐ์น˜๋˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. Column(children: [CircleAvatar(radius: 50.0)]) ์ปฌ๋Ÿผ ์•ˆ์— ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์œ„์ ฏ์„ ๋„ฃ์œผ๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ์„ธ๋กœ๋กœ ๋ฐฐ์น˜๋˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. Column(children: [CircleAvatar(radius: 50.0), CircleAvatar(radiu.. 2021. 12. 11.
[Flutter] ํ”Œ๋Ÿฌํ„ฐ ์›น ๋ฐฐํฌํ•˜๊ธฐ(feat.Fireabse hosting) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ๐Ÿ‘Ÿ ์ž…๋‹ˆ๋‹ค! ์˜ค๋Š˜์€ ํŒŒ์ด์–ด๋ฒ ์ด์Šค ํ˜ธ์ŠคํŒ… ํ†ตํ•ด ํ”Œ๋Ÿฌํ„ฐ๋กœ ๋งŒ๋“  ์›น์„ ๋ฐฐํฌํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์ •๋ฆฌํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ ํ”Œ๋Ÿฌํ„ฐ ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ ๋น„์ฅฌ์–ผ ์ŠคํŠœ๋””์˜ค์—์„œ cmd + shift + p ๋ฅผ ๋ˆŒ๋Ÿฌ์„œ ์ƒˆ๋กœ์šด ํ”Œ๋Ÿฌํ„ฐ ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•ด์ค๋‹ˆ๋‹ค. Firebase Hosting ํ„ฐ๋ฏธ๋„๋กœ ์ด๋™ํ•ด์„œ ์•„๋ž˜์™€ ๊ฐ™์ด ํŒŒ์ด์–ด๋ฒ ์ด์Šค ํˆด์„ ์„ค์น˜ํ•ด์ค๋‹ˆ๋‹ค. sudo npm install -g firebase-tools ํŒŒ์ด์–ด๋ฒ ์ด์Šค ํ˜ธ์ŠคํŒ… ์ดˆ๊ธฐ ์„ค์ •์„ ํ•ด์ค๋‹ˆ๋‹ค. firebase init hosting 1. Create a new project ์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ๋ฅผ ํŒŒ์ด์–ด๋ฒ ์ด์Šค์— ๋งŒ๋“ค์–ด์ค๋‹ˆ๋‹ค. 2. Google Cloud project id ์›ํ•˜๋Š” ์ด๋ฆ„์œผ๋กœ ์ •ํ•ด์ค๋‹ˆ๋‹ค. 3. ์›ํ•˜๋Š” ํ”„๋กœ์ ํŠธ๋กœ ์•„์ด๋””๋กœ ์„ค์ • ์•„๋ž˜์™€.. 2021. 6. 12.
[Flutter] ํ™”๋ฉด ์ด๋™ํ•˜๊ธฐ (Navigator Push & Pop) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ๐Ÿ‘Ÿ ์ž…๋‹ˆ๋‹ค! ์˜ค๋Š˜์€ ํ”Œ๋Ÿฌํ„ฐ์—์„œ ๋‘ ํ™”๋ฉด(ScreenA์™€ ScreenB)์„ ์„œ๋กœ ์ด๋™ํ•˜๊ณ  ๋˜๋Œ์•„์˜ค๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ •๋ฆฌํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค! ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ ScreenA ScreenA๋ฅผ ๋งŒ๋“ค์–ด์ค๋‹ˆ๋‹ค. import 'package:flutter/material.dart'; class ScreenA extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Screen A page"), ), ); } } ScreenB ScreenB๋ฅผ ๋งŒ๋“ค์–ด์ค๋‹ˆ๋‹ค. import 'package:flutter/material.dart'; class Screen.. 2021. 6. 12.
[Flutter] ์˜คํ”ˆ์†Œ์Šค ํŒจํ‚ค์ง€ ์‚ฌ์šฉํ•ด๋ณด๊ธฐ(Using opensource package) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค! ์˜ค๋Š˜์€ Flutter์—์„œ Pub์œผ๋กœ ์™ธ๋ถ€ ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. iOS๋กœ ๋”ฐ์ง€๋ฉด Pub์€ CocoaPod์ด๊ณ  ํŒจํ‚ค์ง€๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋œปํ•˜๋Š” ๊ฒƒ ๊ฐ™๋„ค์š”. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ Dart packages ๋จผ์ € pub.dev๋ผ๋Š” ์‚ฌ์ดํŠธ๋กœ ์ด๋™ํ•ด์ฃผ์„ธ์š”. ์ด ์‚ฌ์ดํŠธ๋Š” ๋‹ค์–‘ํ•œ ์˜คํ”ˆ์†Œ์Šค๋“ค์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒ€์ƒ‰ํ•˜๊ณ  ์‚ฌ์šฉํ•˜๋Š” ๋ฒ•์— ๋Œ€ํ•ด ๋‚˜์™€์žˆ๋Š” ์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค. Dart packages Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter, AngularDart, and general Dart programs. pub.dev ์ €๋Š” ์—ฌ๊ธฐ์„œ e.. 2021. 4. 18.
[Flutter] StatelessWidget๊ณผ StatefulWidget์˜ ์ฐจ์ด์  ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค! ์˜ค๋Š˜์€ ํ”Œ๋Ÿฌํ„ฐ์—์„œ ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ StatelessWidget๊ณผ StatefulWidget์˜ ์ฐจ์ด์ ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค! ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”! StatelessWidget ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ํ•ด์„ํ•ด๋ณด๋ฉด "๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ ์ƒํƒœ๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š์€ ์œ„์ ฏ" ์ด๋ผ๊ณ  ํ•˜๋„ค์š”. ์˜ˆ๋ฅผ ๋“ค๋ฉด ์•„๋ž˜์™€ ๊ฐ™์€ ํ™”๋ฉด์€ ๋” ์ด์ƒ ๋ณ€๊ฒฝ๋  ์ผ์ด ์—†์œผ๋ฏ€๋กœ ์ƒํƒœ๊ฐ€ ํ•„์š”์—†๋Š” ์œ„์ ฏ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ StatelessWidget์œผ๋กœ ๋งŒ๋“ค์–ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. class MyApp extends StatelessWidget {...} StatefulWidget ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ํ•ด์„ํ•ด๋ณด๋ฉด "๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ ์ƒํƒœ๋ฅผ ๊ฐ€์ง„ ์œ„์ ฏ" ์ด๋ผ๊ณ  ๋˜์–ด์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด State๋Š” ์–ด๋–ค ์ผ์„ ํ• ๊นŒ์š”?๐Ÿค” 1.์œ„์ ฏ์ด ๋นŒ๋“œ ๋  ๋•Œ ๋™๊ธฐ์ ์œผ๋กœ ์ฝ๋Š”๋‹ค. 2.์œ„์ ฏ์˜ .. 2021. 4. 18.
[Flutter] ์ด๋ฏธ์ง€์™€ ํฐํŠธ ์ ์šฉํ•˜๊ธฐ (Image & Font) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค! ์˜ค๋Š˜์€ ์ด๋ฏธ์ง€์™€ ํฐํŠธ ์ ์šฉํ•˜๋Š” ๋ฒ•์— ๋Œ€ํ•ด์„œ ์ •๋ฆฌํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. (๋น„์ฅฌ์–ผ ์ŠคํŠœ๋””์˜ค ๊ธฐ์ค€์œผ๋กœ ์„ค๋ช…๋“œ๋ฆด๊ฒŒ์š”) ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ 1. ์ด๋ฏธ์ง€ ๋น„์ฅฌ์–ผ ์ŠคํŠœ๋””์˜ค์— imagesํŒŒ์ผ์„ ๋งŒ๋“ค์–ด์ฃผ์„ธ์š”. images ์•ˆ์— ์ด๋ฏธ์ง€ ํŒŒ์ผ์„ ๋„ฃ์–ด์ฃผ์„ธ์š”. pubspec.yaml ํŒŒ์ผ๋กœ ์ด๋™ํ•˜์…”์„œ ์•„๋ž˜์™€ ๊ฐ™์ด ํŒŒ์ผ ๊ฒฝ๋กœ์™€ ์ด๋ฏธ์ง€ ์ด๋ฆ„์„ ๋„ฃ์–ด์ฃผ์„ธ์š”. assets: - images/profile.png AssetImage์— ์ด๋ฏธ์ง€ ๊ฒฝ๋กœ์™€ ์ด๋ฆ„์„ ๋„ฃ์–ด์ฃผ์„ธ์š”. CircleAvatar( radius: 50.0, backgroundImage: AssetImage('images/profile.png'), ), ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ์ด๋ฏธ์ง€๊ฐ€ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. 2. ํฐํŠธ ๋จผ์ € ์•„๋ž˜ ๊ตฌ๊ธ€ ํฐํŠธ ์‚ฌ์ดํŠธ๋กœ ๊ฐ€์„œ ์›ํ•˜๋Š” ํฐํŠธ๋ฅผ ๋‹ค.. 2021. 4. 11.
728x90
๋ฐ˜์‘ํ˜•