하몬드의 개발블로그

설정 참고자료 Internationalizing Flutter apps How to internationalize your Flutter app. docs.flutter.dev 이거 참고해서 설정하면 된다. 여기서 추가 설명이 필요한 부분만 밑에 더 써놨다. 언어추가 localizationsDelegates: const [ AppLocalizations.delegate, GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], supportedLocales: const [Locale('en'), Locale('ko')], runApp(main.dart)에..

프로젝트 요구사항 프로젝트 기본 구조 - models 폴더엔 Todo 모델과 News 모델이 들어갈 것이다. - providers 폴더엔 데이터 관련 기능을 따로 빼서 작성한 파일이 들어갈 것이다. 자동로그인 구현 SharedPreferences란? SharedPreferences(shared_prefs)는 저장해야할 데이터 양이 적거나 아주 간단한 경우 사용할 수 있는 기법이다. shared_prefs는 키-값 방식으로 데이터를 저장하는 방법이다. 기기 내 xml 파일을 통해 앱의 데이터를 저장하는 방식인데 파일에 데이터를 쓰는 방식이기 때문에 앱을 껐다 켜도 데이터가 유지된다. 많은 양의 데이터를 관리하기 어려우며, 키-값 방식 외의 구조 설계가 불가능하므로 자동 로그인이나 도움말 스킵 여부 등 간단..

프로젝트 요구사항 화면은 하나만 구현하면 되고 구현할 기능들이 좀 많다.. 프로젝트 데모 폴더 구조 타이머 화면을 구성하는 dart파일을 하나 생성 후, main.dart에서 타이머 화면을 띄우도록 하면 된다. 타이머 UI 구현 import 'package:flutter/material.dart'; class TimerScreen extends StatefulWidget { const TimerScreen({super.key}); @override State createState() => _TimerScreenState(); } class _TimerScreenState extends State { @override Widget build(BuildContext context) { final List r..

프로젝트 요구사항 위처럼 크게 3가지 요소로 요구사항을 정리할 수 있다. 전체 목록 화면 구현 폴더구조 list_screen: 이미지와 책제목이 나열된 도서목록을 출력하는 화면 detail_screen: 책을 클릭하면 나오는 해당 책에 관한 세부정보를 출력하는 화면 화면 확인 import 'package:flutter/material.dart'; import 'package:flutter_application_1/screens/list_screen.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your applica..

상태(State)란? '상태'는 변할 수 있는 데이터이다. 이 데이터가 변할 때 화면 자체가 다시 빌드되는 것이 아닌, 데이터와 관련있는 위젯만 다시 빌드된다. 상태관리를 통해 유저는 화면이 다시 로드될 때까지 기다리지 않아도 즉시 데이터의 변화를 확인할 수 있다. 카운터 구현 카운터 UI import 'package:flutter/material.dart'; class FirstScreen extends StatefulWidget { const FirstScreen({super.key}); @override State createState() => _FirstScreenState(); } class _FirstScreenState extends State { @override Widget build(B..

화면전환구현 파일생성 화면전환을 구현하기 위해 화면 1,2 생성 main.dart import 'package:flutter/material.dart'; import './screens/screen1.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData(primarySwatch: Colors..

플러터 기본 개념들 위젯 플러터에서 화면 안의 요소들은 모두 위젯이다. 하나의 큰 위젯 안에는 여러 위젯들이 들어가 있고, 그 위젯 안에도 다른 위젯들이 들어가 있는 형태이다. MyWidget( title: "위젯", description: "위젯예제다.", child: AnotherWidget( // 자식 위젯 안에 또 다른 위젯을 선언할 수 있다. ) ) 플러터 내에서 작성되어 있는 클래스로 객체를 생성하며 이 객체가 화면 속 위젯이 된다. 상태관리 상태관리는 setState()를 활용해 할 수 있다. bool isbtnOn; setState() { isbtnOn = !isbtnOn; } 버튼의 상태변경을 간단하게 구현한 코드 Stream 데이터를 불러오는데 시간이 오래 걸리거나, 지속적으로 데이터를..

웹 IDE DartPad dartpad.dev SDK나 IDE 설치 없이도 Dart 및 Flutter 코드를 Web browser 환경에서 실행할 수 있는 무료 오픈 소스 온라인 편집기이다. 객체지향 프로그래밍 Dart는 객체지향 프로그래밍을 사용한다. 여기서 객체지향이란 코드의 단위를 클래스로 나눠 작성하는 기법이다. 객체지향 프로그래밍 관련 용어들 //클래스 예시 class Person{ //속성 String name; int age; //메서드 getName(){ return name; } } 1. 클래스: 객체 생성을 위한 템플릿, 내부에 정의된 변수(멤버)와 함수(메서드)로 구성되어 있다. 2. 객체: 클래스 내의 모든 구성요소 3. 메서드: 클래스 내부에서 선언된 함수 4. 상속: 만들어진 클..