본문 바로가기

Flutter

(156)
[Flutter] App Weather - 3.5단계 model of openweathermap 이번에는 데이터 모델을 만드는 방법에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오(Arctic Fox 2020.3.1 Patch 4), flutter 2.8.1 소스코드 위치 - Release data_model · mike-bskim/weather · GitHub Release data_model · mike-bskim/weather github.com 데이터 모델을 쉽게 만드는 툴/웹/플러그인들이 있는데, 그중에서 안드로이드 스튜디오에서 추가 가능한 "JsonToDart" 라는 플러그인으로 변환작업을 하였습니다. model 폴더를 만들고 우클릭으로 "Json To Dart" 를 실행한다. 이전 블로그에서 사용한 샘플 데이터를 복/붙한다. 주의 사항))) 복/붙할때 주의 사항은 ..
[Flutter] App Weather - 3단계 json from openweathermap 이번에는 실제 사이트에서 json 데이터를 가져오는 방법에 대해서 알아보도록 하겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오(Arctic Fox 2020.3.1 Patch 4), flutter 2.8.1 소스코드 위치 - Release openweathermap · mike-bskim/weather · GitHub Release openweathermap · mike-bskim/weather github.com 파일구조를 변경하였습니다. 아래와 같습니다. loading.dart 수정 import 'package:flutter/material.dart'; import 'package:weather/data/my_location.dart'; import 'package:weather/data/net..
[Flutter] App Weather - 2단계 http & json 오늘은 http & json 에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 2.8.1 소스코드 위치 - https://github.com/mike-bskim/weather/releases/tag/json Release json · mike-bskim/weather github.com 먼저 준비 작업 1. 패키지 추가 http: ^0.13.4 2. AndroidManifest.xml 파일에 permission 추가 이 부분 추가 loading.dart 파일 수정 import 'package:http/http.dart' as http; // 패키지는 가독성을 위해서 별명추가함 class _LoadingState extends State { @override void ..
[Flutter] App Weather - 1단계 geolocator 8.2.0 오늘은 geolocator 패키지 사용법에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 2.8.1 소스코드 위치 - https://github.com/mike-bskim/weather/releases/tag/start Release start · mike-bskim/weather github.com 먼저 준비 작업 1. 패키지 추가 geolocator: ^8.2.0 2. AndroidManifest.xml 파일에 permission 추가 이부분 추가 main.dart 파일 import 'package:flutter/material.dart'; import 'screens/loading.dart'; void main() { runApp(const MyApp()); }..
[Flutter] Widgets - button 각 버튼들의 옵션에 대해서 정리해보았습니다. 버튼별로 자주 사용하는 옵션만 테스트 해봤습니다. TextButton( onPressed: () { // 짧게 누를때 실행 print('text button-onPressed'); }, onLongPress: () { // 길게 누를때 실행 print('text button-onLongPress'); }, child: Text( 'Text button', style: TextStyle( fontSize: 20.0, // "color: Colors.black87" 가 "primary: Colors.white" 보다 우선순위가 높음 color: Colors.black87, ), ), // 버튼의 스타일에 대해서 자주 사용하는 옵션들 style: TextButton..
[Flutter] Basic - ScaffoldMessenger 이번에는 ScaffoldMessenger 에 대해서 알아보겠습니다. ScaffoldMessenger 를 이용하면 스낵바를 다음 화면에까지 보여줄수도 있고 싫다면 다음화면 이동시 바로 사라지게 처리할수도 있습니다. 먼저 다음화면까지 이어지게 표시하고 싶다면 아래 화면을 참고하세요. 좋아요 클릭 >> 스낵바 표시(버튼 클릭) >> 2번째 페이지로 이동(스낵바 계속 표시) >> 5초후 스낵바 사라짐 void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @overrid..
[Flutter] Basic - Navigator 오늘은 네비게이션을 구현하는 2가지 방법/구조에 대해서 정리해 보았다. Navigator.push Navigator.pushNamed Navigator.push & Navigator.pop 방식으로 구현하는 경우. void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( pr..
[Flutter] Basic - BuildContext context BuildContext 에 대해서 몇가지 느낀점을 정리해보았다. 위젯트리에서 현재 위젯의 위치를 알수있는 정보 BuildContext는 위젯의 정보를 가짐 build 메소드에 의해 전해지는 context는 부모 위젯까지의 정보만 가짐 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: const MyPage(), ); } } class MyPage exten..