01 위젯만들기
rules 추가
# analysis_options.yaml 파일에 아래 설정 추가
rules:
prefer_typing_uninitialized_variables: false
prefer_const_constructors_in_immutables: false
prefer_const_constructors: false
avoid_print: false
# 코드 룰 무시하는 것임
lib/main.dart
void main 아래에 있는 애들 모두 지움
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp()); // 앱 시작해주세요
// 이 안에서만 도는 것임
}
아래 코드 추가
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super (key:key);
@override
Widget build(BuildContext context){
return MaterialApp(
home:
);
}
}
무시해 세팅 문법이니까
Flutter에서 앱 디자인하는 방법: 위젯 짜깁기.
위젯이란 무엇이냐.
홈화면에서 앱의 위젯 기능을 제공 (날씨 위젯)
위젯은 대문자로 시작해서 소괄호가 붙은 애들임
home: Text('안녕')
꼭 알아야하는 위젯 4개
글자 위젯
이미지 위젯
아이콘 위젯
박스 위젯
이게 위젯의 모든 것임.
- 아이콘 넣을 때는
Icon(Icons.star) - 이미지 :
Image.asset('경로')이미지는 경로 넣을 때 경로를 등록해줘야한다. 그런 앱의 모든 자료들을 등록하는 파일 : pubspec.yaml (외부 패키지 라이브러리 등도 가져옴)# The following section is specific to Flutter packages. flutter: assets: - assets/ - 네모박스 넣을 땐
Container()home: Container( width: 50, height: 50, color: Colors.blue)
근데 이렇게 하면, 화면전체가 파란색으로 나온다. 위치 정보가 없어서 그렇다. 그럴 때는 아래와 같이
home:Center(
child: Container( width: 50, height: 50, color: Colors.blue),
)
이렇게 하면 화면 중앙에 파란박스 나온다.