## 121112 # 할일 ```dart import 'package:flutter/material.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:go_router/go_router.dart'; void main() { runApp(const ProviderScope(child: MyApp())); } final routerProvider = Provider((ref) { return GoRouter( routes: [ GoRoute( path: '/todos', builder: (context, state) => const TodoListPage(), routes: [ GoRoute( path: 'add', builder: (context, state) => const AddTodoPage(), ), ], ), ], initialLocation: '/todos', ); }); class MyApp extends ConsumerWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context, WidgetRef ref) { final router = ref.watch(routerProvider); return MaterialApp.router( routerConfig: router, title: 'Flutter Todo 앱', theme: ThemeData( primarySwatch: Colors.pink, useMaterial3: true, ), ); } } @immutable class Todo { final String id; final String content; final DateTime createdAt; final DateTime dueDate; final bool isCompleted; const Todo({ required this.id, required this.content, required this.createdAt, required this.dueDate, this.isCompleted = false, }); Todo copyWith({ String? id, String? content, DateTime? createdAt, DateTime? dueDate, bool? isCompleted, }) { return Todo( id: id ?? this.id, content: content ?? this.content, createdAt: createdAt ?? this.createdAt, dueDate: dueDate ?? this.dueDate, isCompleted: isCompleted ?? this.isCompleted, ); } } class TodoList extends Notifier> { @override List build() => []; void addTodo({required String content, required DateTime dueDate}) { state = [ ...state, Todo( id: DateTime.now().toString(), content: content, createdAt: DateTime.now(), dueDate: dueDate, ), ]; } void toggleTodo(String id) { state = [ for (final todo in state) if (todo.id == id) todo.copyWith(isCompleted: !todo.isCompleted) else todo, ]; } void removeTodo(String id) { state = state.where((todo) => todo.id != id).toList(); } } final todoListProvider = NotifierProvider>(TodoList.new); String formatDate(DateTime date) { return '${date.year}년 ${date.month}월 ${date.day}일'; } class TodoListPage extends HookConsumerWidget { const TodoListPage({Key? key}) : super(key: key); @override Widget build(BuildContext context, WidgetRef ref) { final todoList = ref.watch(todoListProvider); return Scaffold( appBar: AppBar( title: const Text('할 일 목록'), elevation: 0, ), body: todoList.isEmpty ? Center( child: Text( '할 일이 없습니다. 새로운 할 일을 추가해보세요!', style: Theme.of(context).textTheme.titleLarge, ), ) : ListView.separated( itemCount: todoList.length, separatorBuilder: (context, index) => const Divider(height: 1), itemBuilder: (context, index) { final todo = todoList[index]; return Dismissible( key: Key(todo.id), background: Container( color: Colors.red, alignment: Alignment.centerRight, padding: const EdgeInsets.only(right: 16), child: const Icon(Icons.delete, color: Colors.white), ), direction: DismissDirection.endToStart, onDismissed: (_) { ref.read(todoListProvider.notifier).removeTodo(todo.id); }, child: ListTile( leading: Checkbox( value: todo.isCompleted, onChanged: (bool? value) { ref.read(todoListProvider.notifier).toggleTodo(todo.id); }, ), title: Text( todo.content, maxLines: 1, overflow: TextOverflow.ellipsis, ), subtitle: Text( '마감일: ${formatDate(todo.dueDate)}', style: TextStyle( color: todo.dueDate.isBefore(DateTime.now()) ? Colors.red : Colors.grey, ), ), trailing: Icon( Icons.chevron_right, color: Colors.grey[400], ), onTap: () { _showTodoDetails(context, todo); }, ), ); }, ), floatingActionButton: FloatingActionButton( onPressed: () => context.push('/todos/add'), child: const Icon(Icons.add), ), ); } void _showTodoDetails(BuildContext context, Todo todo) { showModalBottomSheet( context: context, isScrollControlled: true, shape: const RoundedRectangleBorder( borderRadius: BorderRadius.vertical(top: Radius.circular(20)), ), builder: (context) => FractionallySizedBox( widthFactor: 0.8, child: DraggableScrollableSheet( initialChildSize: 0.2, minChildSize: 0.2, maxChildSize: 0.2, expand: false, builder: (_, controller) => SingleChildScrollView( controller: controller, child: Padding( padding: const EdgeInsets.all(16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( '마감일: ${formatDate(todo.dueDate)}', style: TextStyle( fontSize: 16, fontWeight: FontWeight.bold, color: todo.dueDate.isBefore(DateTime.now()) ? Colors.red : Colors.black, ), ), const SizedBox(height: 16), Text(todo.content), ], ), ), ), ), ), ); } } class AddTodoPage extends HookConsumerWidget { const AddTodoPage({Key? key}) : super(key: key); @override Widget build(BuildContext context, WidgetRef ref) { final contentController = useTextEditingController(); final dateController = useTextEditingController(); final focusNode = useFocusNode(); useEffect(() { focusNode.requestFocus(); return null; }, []); void addTodo() { if (contentController.text.isEmpty) { ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('할 일을 입력해주세요.')), ); return; } if (dateController.text.isEmpty) { ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('날짜를 입력해주세요.')), ); return; } ref.read(todoListProvider.notifier).addTodo( content: contentController.text, dueDate: DateTime.parse(dateController.text), ); context.pop(); } return Scaffold( appBar: AppBar( title: const Text('할 일 추가'), ), body: Padding( padding: const EdgeInsets.all(16.0), child: Column( children: [ Expanded( child: TextFormField( controller: contentController, focusNode: focusNode, decoration: const InputDecoration( hintText: '할 일을 입력하세요', border: OutlineInputBorder(), ), maxLines: null, expands: true, textAlignVertical: TextAlignVertical.top, ), ), const SizedBox(height: 16), TextField( controller: dateController, decoration: const InputDecoration( hintText: '마감일 (YYYY-MM-DD)', border: OutlineInputBorder(), ), onTap: () async { final date = await showDatePicker( context: context, initialDate: DateTime.now(), firstDate: DateTime.now(), lastDate: DateTime.now().add(const Duration(days: 365)), ); if (date != null) { dateController.text = '${date.year}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')}'; } }, ), const SizedBox(height: 16), ElevatedButton( onPressed: addTodo, child: const Text('추가'), ), ], ), ), ); } } ``` ```jsx import { StatusBar } from "expo-status-bar"; import { Text, View, ScrollView } from "react-native"; import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context"; import * as NavigationBar from "expo-navigation-bar"; import { Platform } from "react-native"; import tw from "twrnc"; export default function App() { if (Platform.OS === "android") { // 네비게이션 바 색상을 설정 NavigationBar.setBackgroundColorAsync("rgba(0, 0, 0, 0)"); // rgba 값을 사용하여 투명도 조절 가능 NavigationBar.setBorderColorAsync("rgba(0, 0, 0, 0)"); // 네비게이션 바의 테두리 색상 설정 NavigationBar.setButtonStyleAsync("dark"); // 버튼 색상을 밝게 설정 } return ( {Array.from({ length: 140 }).map((_, index) => ( Hello, world! ))} ); } ``` ```json { "name": "my-app-1", "version": "1.0.0", "main": "expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "@expo/metro-runtime": "~3.2.1", "expo": "~51.0.24", "expo-status-bar": "~1.12.1", # 추가 "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.74.3", "react-native-safe-area-context": "4.10.5", # 추가 "react-native-web": "~0.19.10", "twrnc": "^4.5.0", # 추가 "expo-navigation-bar": "~3.0.7" # 추가 }, "devDependencies": { "@babel/core": "^7.20.0" }, "private": true } ``` # 2024-07-31 ```dart import 'package:flutter/material.dart'; import 'package:tailwind/tailwind.dart'; import 'TwBuilder.dart'; /// Flutter Text Builder Widget /// to provide utilities in your Text Widget class TwText extends TwWidgetBuilder with TwColorMixin { TwText(this._text) { setChildForColoring(this); } TwText.existing(this._text, this._textStyle) { setChildForColoring(this); } String _text; String? _fontFamily; double? _scaleFactor, _fontSize, _letterSpacing, _lineHeight, _wordSpacing; int? _maxLines; FontWeight? _fontWeight; TextAlign? _textAlign; FontStyle? _fontStyle; TextDecoration? _decoration; TextStyle? _textStyle, _themedStyle; StrutStyle? _strutStyle; TextOverflow? _overflow; TextBaseline? _textBaseline; bool? _softWrap; /// Set [color] of the text TwText color(Color color) { twColor = color; return this; } TwText maxLines(int lines) { _maxLines = lines; return this; } /// Set [fontFamily] for the text TwText fontFamily(String family) { _fontFamily = family; return this; } /// Whether the text should break at soft line breaks. TwText softWrap(bool softWrap) { _softWrap = softWrap; return this; } /// The common baseline that should be aligned between this text span and its /// parent text span, or, for the root text spans, with the line box. TwText textBaseLine(TextBaseline baseline) { _textBaseline = baseline; return this; } /// Bring the words closer. TwText wordSpacing(double spacing) { _wordSpacing = spacing; return this; } /// Can be used to set overflow of a text. /// How visual overflow should be handled. TwText overflow(TextOverflow overflow) { _overflow = overflow; return this; } /// Set [FontWeight] for the text TwText fontWeight(FontWeight weight) { _fontWeight = weight; return this; } /// Replace the closest enclosing [DefaultTextStyle]. TwText textStyle(TextStyle _style) { _themedStyle = _style; return this; } /// See [StrutStyle] for details. TwText strutStyle(StrutStyle _style) { _strutStyle = _style; return this; } /// ============== TEXT ALIGNMENT ============== /// TwText align(TextAlign align) => this.._textAlign = align; /// To align text in [center] TwText get center => this.._textAlign = TextAlign.center; /// To align text in [start] TwText get start => this.._textAlign = TextAlign.start; /// To align text in [end] TwText get end => this.._textAlign = TextAlign.end; /// To align text as [justify] TwText get justify => this.._textAlign = TextAlign.justify; /// To overlow text as [fade] TwText get fade => this.._overflow = TextOverflow.fade; /// To overlow text as [ellipsis] TwText get ellipsis => this.._overflow = TextOverflow.ellipsis; /// Truncates the text and add trailing [...] /// /// Sets overlow text as [ellipsis] TwText get truncate => this.._overflow = TextOverflow.ellipsis; /// To overlow text as [visible] TwText get visible => this.._overflow = TextOverflow.visible; /// ============== FONT THEME ============== /// /// Sets [TextTheme] displayLarge TwText displayLarge(BuildContext context) { _themedStyle = Theme.of(context).textTheme.displayLarge; return this; } /// Sets [TextTheme] displayMedium TwText displayMedium(BuildContext context) { _themedStyle = Theme.of(context).textTheme.displayMedium; return this; } /// Sets [TextTheme] displaySmall TwText displaySmall(BuildContext context) { _themedStyle = Theme.of(context).textTheme.displaySmall; return this; } /// Sets [TextTheme] headlineMedium TwText headlineMedium(BuildContext context) { _themedStyle = Theme.of(context).textTheme.headlineMedium; return this; } /// Sets [TextTheme] headlineSmall TwText headlineSmall(BuildContext context) { _themedStyle = Theme.of(context).textTheme.headlineSmall; return this; } /// Sets [TextTheme] titleLarge TwText titleLarge(BuildContext context) { _themedStyle = Theme.of(context).textTheme.titleLarge; return this; } /// Sets [TextTheme] bodyLarge TwText bodyLarge(BuildContext context) { _themedStyle = Theme.of(context).textTheme.bodyLarge; return this; } /// Sets [TextTheme] bodyMedium TwText bodyMedium(BuildContext context) { _themedStyle = Theme.of(context).textTheme.bodyMedium; return this; } /// Sets [TextTheme] bodySmall TwText bodySmall(BuildContext context) { _themedStyle = Theme.of(context).textTheme.bodySmall; return this; } /// Sets [TextTheme] titleMedium TwText titleMedium(BuildContext context) { _themedStyle = Theme.of(context).textTheme.titleMedium; return this; } /// Sets [TextTheme] titleSmall TwText titleSmall(BuildContext context) { _themedStyle = Theme.of(context).textTheme.titleSmall; return this; } /// Sets [TextTheme] labelSmall TwText labelSmall(BuildContext context) { _themedStyle = Theme.of(context).textTheme.labelSmall; return this; } /// Sets [TextTheme] labelLarge TwText labelLarge(BuildContext context) { _themedStyle = Theme.of(context).textTheme.labelLarge; return this; } /// ============== FONT SIZES ============== /// TwText get textBase => this.._fontSize = TwSizes.textBase; TwText get textXs => this.._fontSize = TwSizes.textXs; TwText get textSm => this.._fontSize = TwSizes.textSm; TwText get textLg => this.._fontSize = TwSizes.textLg; TwText get textXl => this.._fontSize = TwSizes.textXl; TwText get textXl2 => this.._fontSize = TwSizes.textXl2; TwText get textXl3 => this.._fontSize = TwSizes.textXl3; TwText get textXl4 => this.._fontSize = TwSizes.textXl4; TwText get textXl5 => this.._fontSize = TwSizes.textXl5; TwText get textXl6 => this.._fontSize = TwSizes.textXl6; TwText get textXl7 => this.._fontSize = TwSizes.textXl7; TwText get textXl8 => this.._fontSize = TwSizes.textXl8; TwText get textXl9 => this.._fontSize = TwSizes.textXl9; /// To set fontSize of the text using [size] TwText size(double? size) => this.._fontSize = size; /// Sets [textScaleFactor] to custom value TwText scale(double value) => _fontSizedText(child: this, scaleFactor: value); TwText _fontSizedText({required double scaleFactor, required TwText child}) { _fontSize = _fontSize ?? 14.0; _scaleFactor = scaleFactor; return this; } /// ============== FONT WEIGHT ============== /// /// Sets [FontWeight] to [FontWeight.w100] TwText get hairLine => _fontWeightedText(child: this, weight: FontWeight.w100); /// Sets [FontWeight] to [FontWeight.w200] TwText get thin => _fontWeightedText(child: this, weight: FontWeight.w200); /// Sets [FontWeight] to [FontWeight.w300] TwText get light => _fontWeightedText(child: this, weight: FontWeight.w300); /// Sets [FontWeight] to [FontWeight.w400] TwText get normal => _fontWeightedText(child: this, weight: FontWeight.w400); /// Sets [FontWeight] to [FontWeight.w500] TwText get medium => _fontWeightedText(child: this, weight: FontWeight.w500); /// Sets [FontWeight] to [FontWeight.w600] TwText get semiBold => _fontWeightedText(child: this, weight: FontWeight.w600); /// Sets [FontWeight] to [FontWeight.w700] TwText get bold => _fontWeightedText(child: this, weight: FontWeight.w700); /// Sets [FontWeight] to [FontWeight.w800] TwText get extraBold => _fontWeightedText(child: this, weight: FontWeight.w800); /// Sets [FontWeight] to [FontWeight.w900] TwText get extraBlack => _fontWeightedText(child: this, weight: FontWeight.w900); TwText _fontWeightedText( {required FontWeight weight, required TwText child}) { _fontWeight = weight; return this; } /// ============== TEXT LETTER SPACING ============== /// /// Sets [letterSpacing] to -3.0 TwText get tightest => this.._letterSpacing = -3.0; /// Sets [letterSpacing] to -2.0 TwText get tighter => this.._letterSpacing = -2.0; /// Sets [letterSpacing] to -1.0 TwText get tight => this.._letterSpacing = -1.0; /// Sets [letterSpacing] to 1.0 TwText get wide => this.._letterSpacing = 1.0; /// Sets [letterSpacing] to 2.0 TwText get wider => this.._letterSpacing = 2.0; /// Sets [letterSpacing] to 3.0 TwText get widest => this.._letterSpacing = 3.0; /// Sets custom [letterSpacing] with [val] TwText letterSpacing(double val) => this.._letterSpacing = val; /// ============== TEXT TRANSFORMATION ============== /// /// Sets [FontStyle] to [FontStyle.italic] TwText get italic => this.._fontStyle = FontStyle.italic; /// Sets [TextDecoration] as [TextDecoration.underline] TwText get underline => this.._decoration = TextDecoration.underline; /// Sets [TextDecoration] as [TextDecoration.overline] TwText get overline => this.._decoration = TextDecoration.overline; /// Sets [TextDecoration] as [TextDecoration.lineThrough] TwText get lineThrough => this.._decoration = TextDecoration.lineThrough; /// Converts the text to fully uppercase. TwText get uppercase => this.._text = _text.toUpperCase(); /// Converts the text to fully lowercase. TwText get lowercase => this.._text = _text.toLowerCase(); /// Converts the text to first letter of very word as uppercase. TwText get capitalize => this.._text = TwUtils.ucWords('${this.._text}'); /// ============== LEADING ============== /// /// Sets [lineHeight] to 0.75 TwText get leading3 => this.._lineHeight = 0.75; /// Sets [lineHeight] to 1 TwText get leading4 => this.._lineHeight = 1; /// Sets [lineHeight] to 1.25 TwText get leading5 => this.._lineHeight = 1.25; /// Sets [lineHeight] to 1.5 TwText get leading6 => this.._lineHeight = 1.5; /// Sets [lineHeight] to 1.75 TwText get leading7 => this.._lineHeight = 1.75; /// Sets [lineHeight] to 2 TwText get leading8 => this.._lineHeight = 2; /// Sets [lineHeight] to 2.25 TwText get leading9 => this.._lineHeight = 2.25; /// Sets [lineHeight] to 2.5 TwText get leading10 => this.._lineHeight = 2.5; /// Sets [lineHeight] to 1 TwText get leadingNone => this.._lineHeight = 0.75; /// Sets [lineHeight] to 1 TwText get leadingTight => this.._lineHeight = 1; /// Sets [lineHeight] to 1.375 TwText get leadingSnug => this.._lineHeight = 1.375; /// Sets [lineHeight] to 1.5 TwText get leadingNormal => this.._lineHeight = 1.5; /// Sets [lineHeight] to 1.625 TwText get leadingRelaxed => this.._lineHeight = 1.625; /// Sets [lineHeight] to 2 TwText get leadingLoose => this.._lineHeight = 2; /// Sets custom [lineHeight] with [val] TwText lineHeight(double val) => this.._lineHeight = val; /// ============== RENDER TEXT WIDGET ============== /// @override Widget render({Key? key}) { final ts = TextStyle( color: twColor, fontSize: _fontSize, fontStyle: _fontStyle, fontFamily: _fontFamily, fontWeight: _fontWeight, letterSpacing: _letterSpacing, decoration: _decoration, height: _lineHeight, textBaseline: _textBaseline ?? TextBaseline.alphabetic, wordSpacing: _wordSpacing, ); return Text( _text, key: key, textAlign: _textAlign, maxLines: _maxLines, textScaleFactor: _scaleFactor, style: _themedStyle?.merge(ts) ?? _textStyle?.merge(ts) ?? ts, softWrap: _softWrap ?? true, overflow: _overflow ?? TextOverflow.clip, strutStyle: _strutStyle, ); } } extension TextExtensions on Text { /// Extension method to directly access [TwText] /// with any widget without wrapping or with dot operator. @Deprecated('Please use [isText] instead.') TwText get text => TwText.existing(data!, style); TwText get isText => TwText.existing(data!, style); } extension TextStringExtensions on String { /// Extension method to directly access [TwText] /// with [String] itself @Deprecated('Please use [isText] instead.') TwText get text => TwText(this); TwText get isText => TwText(this); } ``` # 2024-07-22 - [예제 1](https://codepen.io/jangka44/pen/bGPergW?editors=0010) # 2024 07 21 ## 플러터 ### go_router 예제 1-3 ```dart import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp.router( routerConfig: _router, ); } final GoRouter _router = GoRouter( initialLocation: '/todos', routes: [ ShellRoute( builder: (context, state, child) { return ScaffoldWithNavBar(child: child); }, routes: [ GoRoute( path: '/todos', builder: (context, state) => const TodosPage(), routes: [ GoRoute( path: '1', builder: (context, state) => const TodoDetailPage(id: 1), ), GoRoute( path: '2', builder: (context, state) => const TodoDetailPage(id: 2), ), ], ), GoRoute( path: '/settings', builder: (context, state) => const SettingsPage(), routes: [ GoRoute( path: 'common', builder: (context, state) => const CommonSettingsPage(), ), GoRoute( path: 'notification', builder: (context, state) => const NotificationSettingsPage(), ), ], ), ], ), ], ); } class ScaffoldWithNavBar extends StatelessWidget { final Widget child; const ScaffoldWithNavBar({super.key, required this.child}); @override Widget build(BuildContext context) { return Scaffold( body: child, bottomNavigationBar: BottomNavigationBar( items: const [ BottomNavigationBarItem( icon: Icon(Icons.list), label: '할일', ), BottomNavigationBarItem( icon: Icon(Icons.settings), label: '세팅', ), ], currentIndex: _calculateSelectedIndex(context), onTap: (index) { if (index == 0) { context.go('/todos'); } else { context.go('/settings'); } }, ), ); } int _calculateSelectedIndex(BuildContext context) { final String location = GoRouterState.of(context).uri.toString(); if (location.startsWith('/todos')) { return 0; } if (location.startsWith('/settings')) { return 1; } return 0; } } class TodosPage extends StatelessWidget { const TodosPage({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('할일 리스트')), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const Text('할일 리스트 페이지'), ElevatedButton( onPressed: () { context.go('/todos/1'); }, child: const Text('1번 할일 상세 페이지로 이동'), ), ElevatedButton( onPressed: () { context.go('/todos/2'); }, child: const Text('2번 할일 상세 페이지로 이동'), ), ], ), ), ); } } class TodoDetailPage extends StatelessWidget { final int id; const TodoDetailPage({super.key, required this.id}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('$id번 할일 상세 페이지')), body: Center(child: Text('$id번 할일 상세 페이지 내용')), ); } } class SettingsPage extends StatelessWidget { const SettingsPage({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('세팅')), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const Text('세팅 페이지'), ElevatedButton( onPressed: () { context.go('/settings/common'); }, child: const Text('일반 설정 페이지로 이동'), ), ElevatedButton( onPressed: () { context.go('/settings/notification'); }, child: const Text('알림 설정 페이지로 이동'), ), ], ), ), ); } } class CommonSettingsPage extends StatelessWidget { const CommonSettingsPage({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('일반 설정')), body: const Center(child: Text('일반 설정 페이지 내용')), ); } } class NotificationSettingsPage extends StatelessWidget { const NotificationSettingsPage({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('알림 설정')), body: const Center(child: Text('알림 설정 페이지 내용')), ); } } ``` ### go_router 예제 1-2 ```dart //!flutter pub add go_router import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp.router( routerConfig: _router, ); } final GoRouter _router = GoRouter( initialLocation: '/todos', routes: [ ShellRoute( builder: (context, state, child) { return ScaffoldWithNavBar(child: child); }, routes: [ GoRoute( path: '/todos', builder: (context, state) => const TodosPage(), ), GoRoute( path: '/settings', builder: (context, state) => const SettingsPage(), ), ], ), ], ); } class ScaffoldWithNavBar extends StatelessWidget { final Widget child; const ScaffoldWithNavBar({super.key, required this.child}); @override Widget build(BuildContext context) { return Scaffold( body: child, bottomNavigationBar: BottomNavigationBar( items: const [ BottomNavigationBarItem( icon: Icon(Icons.list), label: '할일', ), BottomNavigationBarItem( icon: Icon(Icons.settings), label: '세팅', ), ], currentIndex: _calculateSelectedIndex(context), onTap: (index) { if (index == 0) { context.go('/todos'); } else { context.go('/settings'); } }, ), ); } int _calculateSelectedIndex(BuildContext context) { final String location = GoRouterState.of(context).uri.toString(); if (location.startsWith('/todos')) { return 0; } if (location.startsWith('/settings')) { return 1; } return 0; } } class TodosPage extends StatelessWidget { const TodosPage({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('할일 리스트')), body: const Center(child: Text('할일 리스트 페이지')), ); } } class SettingsPage extends StatelessWidget { const SettingsPage({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('세팅')), body: const Center(child: Text('세팅 페이지')), ); } } ``` ### go_router 예제 1-1 ```dart import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true, ), home: const MyHomePage(), ); } } class MyHomePage extends StatelessWidget { const MyHomePage({super.key}); @override Widget build(BuildContext context) { return const Placeholder(); } } ```

도전