지피티활용능력1급

Config Router GoRouter 사용법에 대해서는 pub.dev의 package readme를 참고 router 설정할 my_router.dart 파일을 생성. my_router.dart 파일에 GoRouter의 설정. Router는 page들 간의 관계를 정의하는 것이다. App의 첫 page를 GoRouter에 정의해 보자. package의 가이드 문서를 참고하여 다음과 같이 정의. import 'package:go_router/go_router.dart'; import 'landing_page.dart'; // GoRouter configuration final router = GoRouter( routes: [ GoRoute( path: '/', builder: (context, stat..

페이지 간 이동을 위한 Router에 대해 공부하고 코드를 적용시켜볼것이다.

Column( children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Container( width: 80, height: 80, decoration: BoxDecoration( shape: BoxShape.circle, image: DecorationImage(image: AssetImage('assets/squat.gif')), ), ), Container( width:200, child: Text('1.스쿼트', style: TextStyle(fontSize: 20)), ), Text('05:30', style: TextStyle(fontSize: 20, color: Colors.blue)) ], ), Row( ..

기존에 만들어본 WorkoutListPage를 개선해볼것이다. class를 이용해서 Data를 구조화해야됨 추가로 Gesture Detector를 활용해볼것이다.

위와 같은 화면을 구성해볼것이다. //filename: main.dart import 'package:flutter/material.dart'; import 'landing_page.dart'; import 'workout_list_page.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Workout Tracker', home:WorkoutListPage(), //home: LandingPage(), ); } } Scaffo..

플러터로 다양한 화면을 구성해볼것이다.

플러터의 Container, Column, Row에 대해 학습해보자 Container widget은 화면 구성에서 사용되는 가장 기초적인 위젯이다. Container는 사각형의 투명한 박스다. 다음 그림과 같이 Container는 child, padding, border, margin이란 영역을 갖는다. Container의 모서리는 border. border를 기준으로 안쪽 여백은 padding, 바깥쪽 여백은 margin 실제로 contents가 위치하는 영역은 child이다. 그러므로 Text 가 위치하는 영역은 child 영역이다 SafeArea Widget Container가 status bar 영역에 위치하니 제대로 contents를 표현할 수 없다. Status bar는 OS에서 관장하는 영역..

저번 회차에 이어 플러터의 Container, Column, Row에 대해 이해해보자