[Flutter] 33. Form 위젯  시나리오 코드 1. 기본 코드 - 이름, 이메일, 비밀번호 폼 작성하기import 'package:flutter/material.dart';void main(){ runApp(MyApp8());}class MyApp8 extends StatefulWidget { const MyApp8({super.key}); @override State createState() => _MyApp8State();}class _MyApp8State extends State { // Form 위젯 만들어보기 final _formkey = GlobalKey(); String _name = ''; String _email = ''; String _password =..

[Flutter] 32. 플러터의 기본 위젯들 시나리오 코드 (1) 체크 박스import 'package:flutter/material.dart';void main(){ runApp(MyApp7());}class MyApp7 extends StatefulWidget { const MyApp7({super.key}); @override State createState() => _MyApp7State(); } class _MyApp7State extends State{ // bool 데이터 타입과 bool? 데이터 타입은 다르다. // 옵셔녈 변수(?) = null을 허용한다. bool? _checkBoxValue = false; String? _radioValue = 'Option 1..

[Flutter] 31. setState 메서드란? 1. setStatus 메서드?StatefulWidget시나리오 코드  import 'package:flutter/material.dart';void main(){ runApp(MyApp6());}class MyApp6 extends StatefulWidget { const MyApp6({super.key}); @override State createState() => _MyAppState();}class _MyAppState extends State{ // 멤버 변수 // 언더바(_)를 붙이면 private 변수가 된다. int _count = 0; int get count => _count;@override void initState(..

[Flutter] 30. StatefulWidget과 StatelessWidget 1. StatefulWidget과 StatelessWidget은 뭘까?StatefulWidget:StatelessWidgetvoid main() { runApp(MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( // 여기에 위젯 설정 추가 ); }}  class MyApp extends StatefulWidget { const MyApp({Key? key}) : super(key: key); ..

[Flutter] 29. 로그인 화면 만들어보기  import 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { MyApp({super.key}); // TextEditingController로 TextField의 controller에 넣을 객체를 선언 final TextEditingController _emailController = TextEditingController(); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: fa..

[Flutter] 28. 구글 내장 아이콘과 Material 3 1. 구글 내장 아이콘 사용하기구글 폰츠 - [Icons]에서 사용할 아이콘들을 검색해 찾을 수 있다.   2. 아이콘의 스타일outlined: 윤곽선 스타일rounded: 둥근 스타일sharp: 직선 스타일  3. MaterialApp color theme과 Material 3 색상useMaterial3을 사용하면 Material 라이브러리의 최신 버전 사용 가능useMaterial3과 seedColor, Theme.of.colorScheme를 사용하면 Material3 디자인 가이드에 따른 색을 쓸 수 있다. 4. 시나리오 코드 (1) ColorScheme을 사용해 색상 지정하기import 'package:flutter/material...

[Flutter] 27. 스크롤 바 생성과 폰트 등록, 이미지 사용 1. SingleChildScrollView 위젯이란?(1) SingleChildScrollView 위젯은 스크롤을 제공하기 위해 사용되는 위젯이다.(2) 수직/수평 스크롤을 지정하고자 할 경우, scrollDirection 속성값을 설정할 수 있다.scrollDirection: Axis.vertical (수직)scrollDirection: Axis.horizontal (수평) 2. asset이란?(1) asset은 앱 구성에 필요한 리소스 파일들을 의미한다. 아이콘, 이미지, JSON 파일, 폰트 파일등이 있다.(2) 이런 리소스는 앱 빌드 시 내부에 포함되어야 하고, 이를 위해 pubspec.yaml 파일에 등록이 필요함! *Text..

[Flutter] 26. 이미지 삽입하기  오늘은 Flutter에서 이미지를 삽입하는 방법에 대해 알아보고자 한다. 우선 삽입할 이미지를 준비한다. 그리고 프로젝트 안에 [assets]-[images]라는 폴더를 만들어, [images] 폴더 안에 이미지 파일을 저장한다.   [pubspec.yaml] 파일 안에 아래와 같이 코드를 작성한다. 내가 사용할 이미지의 경로와 이름을 적는 식이다. 작성한 뒤에는 좌측 상단의 [pub gets]를 누른다.   아래와 같이 코드를 작성해주면, 성공적으로 이미지가 삽입된 것을 확인할 수 있다.

[Flutter] 25. Stack, Positioned, Align, Expanded 위젯 1. Stack 위젯Row 위젯은 내부 위젯을 수평으로 나열하는 위젯이다.Column 위젯은 내부 위젯을 수직으로 나열하는 위젯이다.Stack위젯은 내부 위젯을 겹쳐서 나열하는 위젯이다.  2. Positioned 위젯과 Align 위젯자식 위젯을 특정 위치에 정렬하기 위해 사용하는 위젯이다.특정 위치에 위젯을 배치하기 위한 위젯은 Align과 Positioned가 있지만, Positioned 위젯은 Stack 위젯 내부에서만 사용할 수 있지만 Align위젯은 개별적으로도 사용 가능하다.Align 위젯에서 자식 위젯의 위치는 alignment 속성으로 설정할 수 있다.  3. Expanded 위젯위젯 크기를 수치..

[Flutter] 24. 쉽고 빠르게 플러터 Icon 찾기 - FlutterIcon 아래의 사이트에서 Flutter에서 쓰이는 아이콘을 쉽고 간단하게 찾을 수 있다. https://www.fluttericon.com/ FlutterIcon - Flutter custom icons generatorThis site will not work if cookies are completely disabled. {"assets_hash":"e63afe94764170521b88e195c1026df9","page_data":{},"locale":"en-US","layout":"fontello.layout"}www.fluttericon.com  아이콘을 선택한 뒤, [Names]를 클릭하면 해당 아이콘의 이름을 알 수 ..