Mobile/Flutter
[Flutter] 애니메이션
[Flutter] 애니메이션
2023.06.25플러터의 애니메이션에는 두 가지 종류가 있다. 1. Explicit 애니메이션의 시작, 중지, 방향 등 모든 부분을 개발자가 직접 제어한다. Explicit 애니메이션은 일반적으로 시간에 따라 변하는 값이기 때문에 상태를 가지고 있다고 볼 수 있다. 따라서 Explicit 애니메이션을 구현하는 위젯은 대부분 StatefulWidget을 상속받는다. class _CategoriesScreenState extends State with SingleTickerProviderStateMixin { late AnimationController _animationController; @override void initState() { _animationController = AnimationController( v..
[Flutter] Riverpod 상태 관리
[Flutter] Riverpod 상태 관리
2023.06.24버튼을 누르는 등 특정 동작을 수행했을 때 다른 화면으로 이동하도록 설정할 때는 Navigator 객체를 사용한다. void _selectCategory(BuildContext context) { Navigator.of(context).push( MaterialPageRoute( builder: (ctx) => MealsScreen( title: "dd", meals: [], ), ) ); } Navigator.push 메서드로 새로운 라우트를 화면 스택의 맨 위에 추가하고 새로운 화면을 현재 화면 위에 띄운다. Navigator.pop 메서드로 화면 스택의 맨 위에 있는 라우트를 제거하고 이전 화면을 보여준다. push 메서드로 새로 띄운 화면은 안드로이드의 뒤로가기 버튼을 통해 제거할 수 있다. (p..
[Flutter] Theme와 세 가지 트리
[Flutter] Theme와 세 가지 트리
2023.06.19Theme 속성을 사용하면 애플리케이션 전체에서 사용될 테마를 지정할 수 있다. import 'package:flutter/material.dart'; import 'package:expense_tracker/widgets/expenses.dart'; // 공통으로 사용할 디자인 설정을 k로 시작하도록.. var kColorScheme = ColorScheme.fromSeed(seedColor: const Color.fromARGB(255, 96, 49, 181)); void main() { runApp( MaterialApp( theme: ThemeData().copyWith( useMaterial3: true, scaffoldBackgroundColor: Colors.deepPurpleAccent, ..
[Flutter] 여러 가지 화면과 사용자 입력 관리
[Flutter] 여러 가지 화면과 사용자 입력 관리
2023.06.17플러터에서 스크롤 기능을 구현할 때는 ListView 위젯을 사용한다. class ExpensesList extends StatelessWidget { const ExpensesList({super.key, required this.expenses}); final List expenses; @override Widget build(BuildContext context) { return ListView.builder( itemCount: expenses.length, itemBuilder: (ctx, index) => Text(expenses[index].title) ); } } 여러 개의 항목을 위젯으로 보여줄 때, 보여줄 항목이 많으면 Column 위젯보다는 ListView 위젯을 사용해 스크롤 할 수..
[Flutter] 위젯 렌더링과 다트 문법
[Flutter] 위젯 렌더링과 다트 문법
2023.06.16버튼을 눌렀을 때 다른 화면으로 라우팅 기능을 플러터에서 구현해보자. class Quiz extends StatefulWidget { const Quiz({super.key}); @override State createState() { return _QuizState(); } } class _QuizState extends State { Widget activeScreen = const StartScreen(); void switchScreen() { activeScreen = const QuestionsScreen(); } @override Widget build(context) { return MaterialApp( home: Scaffold( body: Container( decoration: co..
[Flutter] Dart 언어와 StatefulWidget
[Flutter] Dart 언어와 StatefulWidget
2023.06.14다트 언어는 자바처럼 객체지향 언어이자 Type-Safe 언어이다. 런타임 중에 타입 안정성을 확인하지만 타입 추론을 지정하기에 해당 변수가 처음 할당될 때 타입을 추론한다. 자바는 타입이 객체와 Primitive Type으로 나뉘지만, 다트는 모든 타입을 객체로 다룬다. 자바와 마찬가지로 다트도 모든 객체의 조상인 Object가 존재하고, int 같이 자바에서는 Primitive Type으로 다루던 타입도 객체로 다루기에 null로 입력될 수 있다. Scaffold 위젯을 생성할 때 파라미터로 몇 가지를 넘겨야 하는데, 위의 예시를 보면 Color? 을 파라미터로 넘긴다고 명시되어 있다. Color? 에서 Color는 타입이고, ? 는 null이 들어갈 수 있다는 의미이다. backgroundColor..
[Flutter] 프로젝트 구조와 Widget
[Flutter] 프로젝트 구조와 Widget
2023.06.11플러터는 다트 언어의 프레임워크로 다트 언어로 작성한 코드를 컴파일을 통해 각 플랫폼이 인식할 수 있는 네이티브 코드로 변환하고, (Android -> Dart VM IOS -> LLVM) 각 운영체제는 컴파일 된 네이티브 코드를 실행하게 된다. 안드로이드, iOS 같은 모바일 애플리케이션 뿐만 아니라 데스크탑 애플리케이션과 웹 애플리케이션도 플러터로 제작할 수 있지만, 모바일 애플리케이션 부분을 플러터가 가장 원활하게 지원하고 있다. 개발할 때 사용하는 IDE로는 vscode, Android Studio, IntelliJ 등 여러가지가 있다. .dart_tool : 다트와 플러터가 생성한 파일이 포함된다. 스프링의 .gradle 디렉토리와 비슷한 역할을 한다. .idea : 인텔리제이로 프로젝트 생성할..