본문 바로가기

코딩강의/expense_tracker-반응형,적응형 (플러터-유데미)

(4)
139. Building Adaptive Widgets 1. 반응형은 화면 크기에 따라 화면이 바뀌는 것이라면, 적응형이란 플랫폼에 따라, 기기에 따라 화면이 바뀌는 것을 뜻한다. 기기에 따라 화면이 바뀌는 예시중에 하나는 alert화면이다. if(Platform.isIOS) { ~~~ } 를 하면 ios일때 어떻게 해라는 식으로 할 수 있다
138. Using the LayoutBuilder Widget 1. 반응형 레이아웃 만들기 비용 추가 - 가로화면에서 레이아웃을 바꿔보자. -new_expense.dart import 'package:flutter/material.dart'; import 'package:expense_tracker/models/expense.dart'; class NewExpense extends StatefulWidget { const NewExpense({super.key, required this.onAddExpense}); final void Function(Expense expense) onAddExpense; @override State createState() { return _NewExpenseState(); } } class _NewExpenseState exten..
~137. Understanding "Safe Areas" 1. 키보드가 가려지는 걸 막아보자 - new_expense.dart @override Widget build(BuildContext context) { final keyboardSpace = MediaQuery.of(context).viewInsets.bottom; return SizedBox( height: double.infinity, child: SingleChildScrollView( child: Padding( padding: EdgeInsets.fromLTRB(16, 48, 16, keyboardSpace + 16), 1) keyboardSpace부분을 하단 패딩 부분에 추가해준다. 2) SingleChildScrollView를 추가해서 스크롤이 되게끔해주고, 전체 화면이 되게끔 sizedB..
~135. Understanding Size Constraints 1. 화면 회전에 따라 레이아웃이 변경되는 것을 막는 방법과, 회전 후 레이아웃을 변경하는 방법을 알아보자. - main.dart import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:expense_tracker/widgets/expenses.dart'; var kColorScheme = ColorScheme.fromSeed( seedColor: const Color.fromARGB(255, 96, 59, 181), ); var kDarkColorScheme = ColorScheme.fromSeed( brightness: Brightness.dark, seedColor: const Col..