[2주차] 튜토리얼 영상 #4-#7

이번 2주차 플러터 스터디에서는 플러터 튜토리얼 영상을 #4에서 #7까지 학습하였습니다.

영상 주소 : https://www.youtube.com/watch?v=TSIhiZ5jRB0&list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ&index=4

안드로이드 스튜디오

• running문제 → 운영체제의 버전을 낮추면 해결되는 경우 있음
• plugin 못 찾는 경우 → help 누르고 plugin검색
• new flutter project눌렀는데 어떤 형태를 원하는지, 프로젝트 이름은 무엇으로 할지 안 나옴 → 그냥 일단은 next버튼 눌러서 실습
• lib파일에서 대부분은 프로그래밍이 이루어짐
• lib파일의 main.dart파일에서...
• 에뮬레이터 안 돌아가면 운영체제 버전 낮추어서 다시 시도 (그래도 잘 안돌아감...)

 

Sample code

void main() ⇒ runApp(App이름());

⇒ 여기서 runApp은 코드를 실행시키는 명령어

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
 home: Text('Hello world!!'),
));

⇒Hello world!!가 화면에 출력됨

 

Widgets (code)

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
 home: Scaffold(
		appBar: AppBar(
				title: Text('App Bar가 표시됨'),
				centerTitle: true,
		),//AppBar
		body: Center(
			child: Text('Hello world!!'),
		)//Center
		floatingActionButton: FloatingActionButton(
			child: Text('click'),
		)//FloatingActionButton
	),//Scaffold
));//MaterialApp

 

Color & Font (Code)

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
 home: Scaffold(
		appBar: AppBar(
				title: Text('App Bar가 표시됨'),
				centerTitle: true,

				backgroundColor: Colors.red[600],
//backgroundColor는 AppBar의 바탕 색을 바꾼 것
//Colors하고 점 짝으면 여러가지 색깔이 뜨는데 거기서 색을 고를 수 있음
//예를 들어 빨간색을 고르고 Ctrl + Q를 하면 빨간색 중에서도 여러가지 를 고를 수 있다

		),//AppBar
		body: Center(
			child: Text(
       'Hello world!!',
				style: TextStyle(
					fontSize : 20.0,
					fontWeight: FontWeight.bold,
					color: Colors.grey[600],
					fontFamily: 'Indiflower',//다운 받은 폰트의 이름이어야 함
				)
			),
		)//Center
		floatingActionButton: FloatingActionButton(
			onPressed :(){},
			child: Text('click'),
			backgroundColor: Colors.red[600],
		)//FloatingActionButton
	),//Scaffold
));//MaterialApp

→ 폰트 다운 받아서 사용

→ lib폴더 안에 pubspec.yaml파일에 가면 fonts부분을 사용할 수 있음

→ fonts 부분에서 폰트를 저장한 공간을 알려주면 다운 받은 폰트를 사용할 수 있음

 

*코드 언어는 다 Dart입니다*