개발 note

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

theme: 앱의 전체 테마, 색상 구성 등이 포함 (예, theme: ThemeData(primarySwatch: Colors.red))home: 앱이 시작할 때 보여질 기본 경로 또는 위젯  Scaffold 위젯 사용법과 주요 property MaterialApp 내에서 머티리얼 디자인의 기본 레이아웃 구조를 제공하는 위젯주요 propertyappBar: 화면의 상단에 있는 앱 바.보통 value로 AppBar(title: const Text('FunCoding'))와 같이 AppBar 위젯을 넣는 경우가 많음body: 화면의 기본 내용, 일반적으로 위젯의 목록.floatingActionButton: 인터페이스에 위치한 추가 버튼.floatingActionButtonLocation: 부가 버튼의 위치..

'package:flutter/material.dart' 임포트MaterialApp으로 메인 위젯 트리 감싸기title과 theme과 같은 속성 설정home : 속성을 주 페이지로 정의Scaffold:앱의 시각적 레이아웃에 대한 기본 구조 제공appBar 및 body와 같은 속성 설정레이아웃 요소 제공 (예: AppBar, Drawer, BottomNavigationBar)각 구성요소는 또 다른 위젯으로 각각의 사용법은 이후에 정리하기로 함body에 실제 화면 관련 위젯 정의import 'package:flutter/material.dart';void main(){ runApp(MyApp());}// 상태 기반 UIclass MyApp extends StatelessWidget { const MyAp..

만들어 보기 import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return Column(children: [ Row( textDirection: TextDirection.ltr, mainAxisAlignment: MainAxisAlignment.start, children: [ Container(color: Colors.red, width: 50, h..

플러터에 공식적인 용어가 정립이 안되어 있음 layout 위젯visible 위젯을 원하는 위치에 배치하기 위해, layout 위젯을 선택간단하고 기본적인 layout 위젯은 Container와 Center 위젯전체 layout 위젯 리스트: https://docs.flutter.dev/development/ui/widgets/layoutvisible 위젯간단하고 기본적인 visible 위젯은 다음과 같음 Text 위젯Text('Hello World') Image 위젯Image.asset('images/lake.jpg') Icon 위젯Icon(Icons.home) 3. visible 위젯을 layout 위젯 안에 넣음 모든 layout 위젯은 하나의 자식을 가질 수 있는 위젯과 여러 자식을 가질 수 있는 ..