Flutter에서 Retrofit을 사용하여 API를 호출하려면 retrofit 패키지와 함께 dio 패키지를 사용합니다. Retrofit은 API 호출을 위한 인터페이스를 정의하여 코드의 재사용성을 높이고, 자동으로 API 호출 코드를 생성할 수 있어 간편하게 RESTful API와 통신할 수 있습니다. 다음은 Retrofit의 구현과 활용 방법을 단계별로 설명한 예제입니다. 1. Retrofit 및 Dio 패키지 설치우선 retrofit과 dio, 그리고 코드 생성에 필요한 build_runner 패키지를 설치합니다. pubspec.yaml에 패키지 추가 dependencies: flutter: sdk: flutter dio: ^5.0.0 retrofit: ^3.0.1dev_depende..
Flutter
Flutter에서 JWT 토큰을 관리하는 방법은 주로 로그인 및 인증이 필요한 앱에서 중요한 역할을 합니다. 기본적으로 JWT 토큰을 생성하고 저장한 후, 서버에 요청을 보낼 때마다 이를 사용하여 인증을 처리합니다. 아래는 Flutter 앱에서 JWT 토큰을 관리하는 데 필요한 기본적인 단계와 예제 코드입니다.Flutter에서 JWT 토큰을 관리하는 방법은 주로 로그인 및 인증이 필요한 앱에서 중요한 역할을 합니다. 기본적으로 JWT 토큰을 생성하고 저장한 후, 서버에 요청을 보낼 때마다 이를 사용하여 인증을 처리합니다. 아래는 Flutter 앱에서 JWT 토큰을 관리하는 데 필요한 기본적인 단계와 예제 코드입니다.1. JWT 토큰 관리의 개요JWT 토큰은 클라이언트와 서버 간의 인증을 위해 사용되는 토..
flutter에서 상태 관리는 화면의 데이터가 변경될 때 UI에 즉시 반영되도록 하는 중요한 개념입니다.1. Flutter 기본 상태 관리: StatefulWidgetFlutter의 기본 상태 관리 방식으로, StatefulWidget을 사용하여 상태 변경이 필요한 위젯을 정의합니다. 상태는 setState() 메서드를 통해 업데이트됩니다. import 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: CounterScreen(..
Flutter에서 애니메이션은 UI에 생동감을 주고 사용자 경험을 풍부하게 만드는데 유용합니다. 애니메이션은 기본적으로 Implicitly Animated Widget과 Explicitly Animated Widget 두 가지 유형으로 나뉘며, Flutter는 이를 쉽게 다룰 수 있는 다양한 위젯을 제공합니다.1. Implicitly Animated Widgets간단한 애니메이션 효과를 줄 때는 Flutter의 암시적 애니메이션 위젯을 사용합니다. 이러한 위젯은 특정 속성이 변경될 때 자동으로 애니메이션을 적용해줍니다.Implicitly Animated 위젯 예제import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyAp..
Flutter에서 Material 앱을 생성하려면 MaterialApp을 사용하여 기본 Material 테마와 스타일을 설정합니다. 그 위에 다양한 위젯들을 추가하여 화면을 구성합니다. import 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Material Design Sample', theme: ThemeData( primarySwatch: Colors.blue, ), home..
기본 생성 화면 import 'package:flutter/material.dart';class PostCreatePage extends StatefulWidget { const PostCreatePage({super.key}); @override State createState() => _PostCreatePageState();}class _PostCreatePageState extends State { @override Widget build(BuildContext context) { return const Placeholder(); }} ConsumerStatefulWidget 활용 import 'package:flutter/material.dart';import 'package:..
PostListPage 에서 PostDetailPage 위젯 생성 : ListView.separated( itemBuilder: (context, index) { Post post = postList[index]; return ListTile( onTap: () { Navigator.push(context, MaterialPageRoute(builder: (context) { return PostDetailPage(postId: post.id); ..
lib/providers/state_noti_provider/post_detail_view_model_provider.dart // 새로운 개념 추가import 'package:class_riverpod_mvvm/providers/provider/post_respisitory_provider.dart';import 'package:flutter_riverpod/flutter_riverpod.dart';import '../../models/post.dart';import '../../view_models/post_detail_view_model.dart';final postDetailViewModelProvider = StateNotifierProvider.family, int>((ref, postId)..
PostListPage - onTab() 추가 onTap: () { Navigator.push(context, MaterialPageRoute(builder: (context) { return PostDetailPage(); })); } PostDetailPage 기본 화면 설정 import 'package:flutter/material.dart';class PostDetailPage extends StatelessWidget { const PostDetailPage({super.key}); @override Widget build(BuildContext context) { print("여기는 상세보기 화면 입니..
main.dart import 'package:class_riverpod_mvvm/view/post/post_list_page.dart';import 'package:flutter/material.dart';import 'package:flutter_riverpod/flutter_riverpod.dart';// 우리 앱에서 사용하는 모든 Provider 를 하나의 컨테이너(ProviderContainer) 로 묶어 관리 합니다.void main() { runApp( const ProviderScope( child: MaterialApp( home: NovaBlog(), ), ), );}class NovaBlog extends StatelessWidget { ..
