Study Record

✍ Container 일반적인 그림 그리기, 위치 지정 및 크기 조정을 편리하게 해주는 위젯이다. Container({ Key? key, AlignmentGeometry? alignment, EdgeInsetsGeometry? padding, Color? color, Decoration? decoration, Decoration? foregroundDecoration, double? width, double? height, BoxConstraints? constraints, EdgeInsetsGeometry? margin, Matrix4? transform, AlignmentGeometry? transformAlignment, Widget? child, Clip clipBehavior = Clip.non..

✍ Gradient Class 2D gradient를 위한 인터페이스로 BoxDecoration에서 LinearGradient, RadialGradient, SweepGradient 를 사용할 수 있게 해 준다. ✍ LinearGradient 선형 그러데이션 효과를 줄 수 있다. 시작점(begin) 과 끝점(end)의 두 개의 포인트가 있는데 시작점은 0.0 에 해당하고 끝점은 1.0 에 해당한다. 리스트로 설정된 colors 들을 참고하여 시작점에서 끝점까지 그라데이션 효과를 준다. 단순하게 Alignment.topLeft 등 숫자가 아닌 위치로 나타내도 된다. LinearGradient({ AlignmentGeometry begin = Alignment.centerLeft, AlignmentGeome..

🎁 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..

✍ 난수 생성하기 Dart 에서 난수를 생성하려면 Random() 클래스를 사용한다. import 'dart:math'; void main(){ final random = Random(); } 3가지 타입(bool, double, int)의 난수를 생성할 수 있다. var intValue = Random().nextInt(10); // intValue is >= 0 and = 50 and = 0.0 and < 1.0. doubleValue = Random().nextDouble(..

✍ 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..