에러!!
AVD Nexus_5_API_29 is already running. If that is not the case, delete the files at C:\Users\사용자\.android\avd/Nexus_5_API_29.avd/*.lock and try again.
-> C:\Users\사용자\.android\avd/Nexus_5_API_29.avd/*.lock 이 경로의 .lock 파일 삭제하면 에뮬레이터 정상작동
Flutter 기초지식
요약
1. 기본 샘플 앱 해설
: UI 사용법 확인가능
3. https://material.io/design/
: 머터리얼 디자인
4. https://developer.apple.com/design/
: 쿠퍼티노 디자인
프로젝트 구조
프로젝트이름
> 안드로이드
>ios
>lib > main.dart 에서 작성
>test 테스트 코드 작성
>pubspec.yaml 외부라이브러리 작성시 수정.
Scaffold, AppBar
1)
main.dart 수정
home : Text('헬로월드'),
* Hot reload 기능 : 바로 반영
* build 에서 MaterialApp _ 안드로이드꺼 채용.
home: 의 내용은 Text
* Scaffold 비계
2) MaterialApp >> 안드로이드 디자인 채용. 스캐폴드로 씨워사용
감싸고 > alt enter > Wrap with new widget 선택, Scaffold(body: Text('헬로월드'))
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(appBar: AppBar(
title : Text('머리야'),
),
body : Text('Hello 월드')),
);
}
}StatelessWidget vs StatefulWidget
extends stateLessWidget : 화면변경없을 때.
extends statefulWidget :화면변경 있을 떄
stful +alt +엔터 >> 위젯 선택 자동생성
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HelloPage('hello 머리')
);
}
}
class HelloPage extends StatefulWidget {
final String title;
HelloPage(this.title);
@override
_HelloPageState createState() => _HelloPageState();
}
class _HelloPageState extends State<HelloPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title),
),
body: Text(widget.title,style: TextStyle(fontSize:30)));
}
}class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HelloPage('hello 머리')
);
}
}
class HelloPage extends StatefulWidget {
final String title;
HelloPage(this.title);
@override
_HelloPageState createState() => _HelloPageState();
}
class _HelloPageState extends State<HelloPage> {
String _message = 'Hello 월드';
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: _chageMessage),
//onPressed: () =>print("클릭")),
appBar: AppBar(title: Text(widget.title),
),
body: Text(_message));
}
void _chageMessage() {
setState(() {//ui 변경하겠다.
_message = 'change 월드';
});
}
}class _HelloPageState extends State<HelloPage> {
String _message = 'Hello 월드';
int _counter =0;
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: _chageMessage),
//onPressed: () =>print("클릭")),
appBar: AppBar(title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center
,children: <Widget>[
Text(_message,style: TextStyle(fontSize: 30)),
Text('$_counter',style: TextStyle(fontSize: 30))
],
)));
}
void _chageMessage() {
setState(() {//ui 변경하겠다.
_message = 'change 월드';
_counter++;
});
}
}
UI 사용법 확인가능, 버전이 낮으니 적용시 주의 필요.
- 기본 위젯
- Text
- 테마설정
- Center, Container
- Column
- Row
- Stack >> 겹칠수 있음.
- Padding
- 머터리얼 디자인
4. https://developer.apple.com/design/
: 쿠퍼티노 디자인
- 우클릭 New > dart file 선택 cupertino_page.dart 추가.
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
//stful 엔터
class CupertinoPage extends StatefulWidget {
@override
_CupertinoPageState createState() => _CupertinoPageState();
}
class _CupertinoPageState extends State<CupertinoPage> {
bool _switch = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: CupertinoNavigationBar(
middle : Text('쿠퍼티노 UI'),
),
body: Column(
children: <Widget>[
CupertinoButton(
child: Text('쿠퍼티노 버튼'),
),
CupertinoSwitch(
value: _switch,
onChanged: (bool value){
setState(() {
_switch = value;
});
},
),
RaisedButton(
child: Text('머터리얼 버튼'),
)
,
Switch(
value: _switch,
onChanged: (bool value){
setState(() {
_switch = value;
});
},
)
],
),
);
}
}
import 'package:flutter/material.dart';
import 'cupertino_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: CupertinoPage()
// home: HelloPage('hello 머리')
);
}
}
- 화면전환 네비게이션
- 인스타그램 클론 작성
- 인스타그램 클론 소개
- 화면설계, 뼈대 작성
- HomePage UI 작성
- Account 페이지 UI 작성
- Search 페이지 UI 작성
- Create 페이지 UI 작성
- 갤러리에서 사진 불러오기
- 로그인 페이지 UI 작성
- Firebase와 Google 로그인 가능 구현
- Firebase 인증 A/S영상
- FirebaseUser 정보 표시
- Firebase Storage와 Firestore를 사용하여 게시물 업로드 하기
- StreamBuilder로 Firestore의 데이터 읽어오기
- 게시물 보는 화면 UI 작성
- Hero 위젯으로 애니메이션 구현 하기, Firestore에 단발성 로딩 구현
- IOS 를 위한 파이어베이스 설정
- link 전체소스
Dart 문법정리
