Study Record

🎁 Navigator Class Navigator 위젯은 스택 규칙(Last In First Out)에 따라 위젯들을 관리한다. 모바일 앱은 '화면', 혹은 '페이지'라 불리는 전체 화면 요소가 있는데 이걸 Flutter에서는 Route라고 부른다. Navigator는 이 Route 객체를 스택으로 관리한다. 앱에서 우리가 보는 화면은 Route Stack의 최상단에 있는 Route이고 다른 화면으로 전환하는 것은 Route Stack에 전환할 화면의 정보가 담긴 Route를 추가(push) 한 것이다. Route Stack에서 최상단에 있는 Route를 제거하면(pop) 그다음 상위 Route로 전환되면서 이전 화면으로 되돌아간다. HomeScreen → TestScreen → FinalScreen 순..

✍ Button 만들기 Text Button을 만들 수 있는 방법은 여러 가지가 있겠지만 3가지를 소개하자면 TextButton, ElevatedButton, OutlinedButton 이 있다. 이 3개의 위젯 모두 설정할 수 있는 인자들이 같다. 또한 각각 서로의 위젯을 만들 수 있다. (Ex. TextButton으로 ElevatedButton을 만들거나 OutlinedButton으로 ElevatedButton을 만들 수 있다.) 서로가 서로의 위젯을 똑같이 만들 수 있는데 하나의 클래스로 존재하지 않고 따로 존재하는 건 그 쓰임의 용도를 다르게 하기 위해서다. 따라서 사용할 때 각각의 쓰임에 맞는 위젯을 사용하는 것이 좋다. ElevatedButton({ Key? key, required void ..

✍ Slider Widget 사용자가 인디케이터를 움직임으로써 값을 설정할 수 있는 위젯이다. import 'package:flutterd/material.art'; Slider({ Key? key, required double value, required void Function(double)? onChanged, void Function(double)? onChangeStart, void Function(double)? onChangeEnd, double min = 0.0, double max = 1.0, int? divisions, String? label, Color? activeColor, Color? inactiveColor, Color? thumbColor, MouseCursor? mouse..

✍ padding widget padding 위젯은 child 위젯의 겉부분에 빈 공간을 설정할 수 있다. Padding({ Key? key, required EdgeInsetsGeometry padding, Widget? child, }) padding 인자 값 설정 방법 1. EdgeInsets.all(double value) Padding( padding: EdgeInsets.all(16.0); child: Container() ) child 위젯의 전 방향(왼쪽, 오른쪽, 위, 아래) 에 16.0 만큼 padding 을 준다. 2. EdgetInsets.only({double left, double right, double top, double, bottom }) Padding( padding: ..

✍ const를 사용하는 이유 Text() 위젯 2개와 setState()를 할 수 있는 버튼이 하나 있는 간단한 프로젝트가 있다고 해보자. import 'package:flutter/material.dart'; class HomeScreen extends StatefulWidget { const HomeScreen({Key? key}) : super(key: key); @override State createState() => _HomeScreenState(); } class _HomeScreenState extends State { @override Widget build(BuildContext context) { return Scaffold( body: SafeArea(child: Container..

✍ theme 글꼴 적용 보통 Text(...) 위젯의 스타일(style)을 적용하려면 다음과 같이 Text() 위젯마다 TextStyle() 를 일일이 적용해야 한다. Text( "하늘하늘 맑은 하늘", style: TextStyle( color: Colors.white, fontSize: 70.0, fontFamily: 'parisienne' ), ); 중복되는 TextStyle() 를 하나로 통합해서 사용할 수 있는 방법이 theme 에 textTheme 이다. main 함수가 있는 MaterialApp 의 theme 인자값에 TextStyle() 을 설정한다. MaterialApp( theme: ThemeData( textTheme: TextTheme( headline1: TextStyle( co..

🎁 CupertinoDatePicker IOS 에서 주로 사용하는 날짜 선택 다이얼로그로 Cupertino 가 IOS 에서 자주 사용되는 이름이니 이 단어가 붙으면 IOS 와 관련된 기능이라고 생각해도 된다. 반대로 Material 은 AOS 에서 자주 사용되는 이름이다. CupertinoDatePicker({ Key? key, CupertinoDatePickerMode mode = CupertinoDatePickerMode.dateAndTime, required void Function(DateTime) onDateTimeChanged, DateTime? initialDateTime, DateTime? minimumDate, DateTime? maximumDate, int minimumYear = 1,..

🎁 RichText Class? RichText 위젯은 여러 가지 유형을 사용하는 텍스트를 표시한다. 표시할 텍스트는 TextSpan 객체의 트리를 사용하여 설명되며, 각 트리에는 해당 하위 트리에 사용되는 관련 스타일을 따로 적용할 수 있다. 문장 중 특정 단어만 강조하거나 밑줄을 긋고 싶을 때 등등 여러가지 상황에서 사용될 수 있다. [특정 단어 강조] RichText( text: TextSpan( text: 'Hello ', style: DefaultTextStyle.of(context).style, children: const [ TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)), TextSpan(text: ' world!..