개발 note

Form 위젯 TextField는 단순히 하나의 텍스트 입력을 다루는데 반해서, Form은 그 자체로 입력 필드를 가지고 있지 않지만, FormField 위젯들을 그룹화하여 관리하며, 복잡한 유효성 검사와 보다 쉽게 할 수 있는 위젯다른 위젯과 달리 Form 위젯은 자체적인 화면을 제공하지는 않으며, 사용자가 입력한 데이터의 유효성 검증, 데이터 관리 관련 기능을 제공함Form 위젯 내에서 TextFormField 위젯을 사용하여 각 데이터 입력을 받는 것이 일반적임Form 위젯 작성 방법은 다음과 같음 1. Form 위젯을 위한 GlobalKey를 만들어야 함. GlobalKey는 FormState 전체에 액세스하는 데 사용되며, 이 객체는 폼 데이터의 유효성을 검사하고 저장하는 데 사용됨final _..

구현할 화면 import 'package:flutter/material.dart';void main() { runApp(const LoginApp());}class LoginApp extends StatelessWidget { const LoginApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: const LoginPage(), ); }}class LoginPage extends StatelessWidget { const LoginPage({super.key}); @override Widg..

스크롤을 제공하기 위해 사용되는 위젯수직/수평 스크롤을 지정하고자 할 경우, scrollDirection 속성값을 설정할 수 있음scrollDirection: Axis.vertical (수직)scrollDirection: Axis.horizontal (수평)import 'dart:ffi';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( home: Scaffold( ..

* 참고 * images 파일 -> 안에 삽입할 이미지를 넣어준다pubspec.yaml 파일에 다가assets: - assets/images/image.png를 입력해줍니다 ClipRRect( child: Image.asset( 'assets/images/image.png', // 이미지 경로 fit: BoxFit.cove" data-og-host="maze910.tistory.com" data-og-source-url="https://maze910.tistory.com/251" data-og-url="https://maze910.tistory.com/251" data-og-image="https://scrap.kakaocdn.net/dn/b4La6M/hyXs0uWWBy/kDdx0k93McmUKJhtxF..

Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com폰트를 정하고 다운을 받아줍니다➡️ 압축을 해줘해준 후assets 파일 -> fonts 파일 -> 다운 받은 폰트를 넣어줍니다fonts: - family: LilitaOne fonts: - asset: assets/fonts/LilitaOne-Regular.ttfpubspec.yaml 파일에 코드를 적어줍니다Text( 'YAYoung', style: TextStyle( color: Color(0xFF104B3A),// #104B3A 색상 지정 fontSize: 30..

assets 파일 -> images 파일 -> 안에 삽입할 이미지를 넣어준다pubspec.yaml 파일에 다가assets: - assets/images/image.png를 입력해줍니다 ClipRRect( child: Image.asset( 'assets/images/image.png', // 이미지 경로 fit: BoxFit.cover, width: double.infinity, height: 400, ),),이렇게 입력해주면 이미지 삽입 성공!!

위젯 크기를 수치로 설정하지 않고, 비율로 설정할 때 사용하는 위젯화면 사이즈가 다양할 수 있기 때문에, 수치로 위젯 크기를 설정할 경우, 여러 화면 사이즈 대응이 어려울 수 있음따라서, 비율로 위젯 크기를 설정하는 방법에 대해 알아둘 필요가 있음Expanded 위젯의 flex 속성은 각 자식 위젯이 다른 자식 위젯과 비교하여 차지해야 하는 공간의 양을 지정하는 데 사용다음 예제에서는 첫 번째 Expanded 위젯의 flex 속성을 1로, 두 번째 Expanded 위젯의 flex 속성을 2로 설정첫 번째 Expanded 위젯은 Column의 1/3, 두 번째 Expanded 위젯은 Column의 2/3 공간을 차지하며 화면에 표시됨 import 'package:flutter/material.dart';v..

Align 위젯자식 위젯을 특정 위치에 정렬하기 위해 사용하는 위젯특정 위치에 위젯을 배치하기 위한 위젯은 Align과 Positioned가 있지만,Positioned는 Stack 안에서만 사용할 수 있고, Align은 독립적으로도 사용 가능함Align에서 자식 위젯의 위치는 alignment 속성으로 설정alignment 속성값은 주로 Alignment 클래스 설정값 (예: Alignment.bottomRight, 오른쪽 하단부에 위치)Alignment 주요 값Alignment.topLeft: 위젯을 부모 위젯의 왼쪽 상단 모서리에 맞춤Alignment.topCenter: 위젯을 부모 위젯의 상단 중앙에 맞춤Alignment.topRight: 위젯을 부모 위젯의 오른쪽 상단 모서리에 맞춤Alignmen..

Row 위젯은 내부 위젯을 수평으로 나열하는 위젯, Column 위젯은 내부 위젯을 수직으로 나열하는 위젯Stack 위젯은 내부 위젯을 겹쳐서 나열하는 위젯import 'package:flutter/material.dart';void main(){ runApp(MyApp7());}class MyApp7 extends StatelessWidget { const MyApp7({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Stack( children: [..

backgroundColor: AppBar 배경색elevation: AppBar를 어느 정도 떠오르게 설정 (그림자 깊이가 달라짐)title: 보통 Text 위젯으로 타이틀 표시centerTitle: true로 설정하면, 타이틀이 가운데 위치leading: 제목 앞에 표시되는 위젯. 보통 IconButton 위젯으로 메뉴 등을 표시actions: 제목 뒤에 표시되는 위젯. 보통 IconButton 위젯으로 메뉴 등을 표시 import 'package:flutter/material.dart';void main() { runApp(MyHome2());}class MyHome2 extends StatelessWidget { const MyHome2({super.key}); @override Widget..