flutter -- 기초 예제
참고 : https://flutter.dev/docs/development/ui/widgets-intro
** 기본 구조 예제
import 'package:flutter/material.dart';
void main() {
runApp(
Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}
--> textDirection 없으면, error 발생.
** runApp 함수
-- widget tree의 root 를 형성하는 widget 을 인수(argument)로 받는다.
-- 인수 widget 을 확장하여, 전체 화면을 채운다.
(따라서, Container 사용해서, width, height 지정해도 전체 화면을 채움.)
https://api.flutter.dev/flutter/widgets/runApp.html
void runApp (
Widget app
)
** 기본 예제 + Container widget 사용
https://api.flutter.dev/flutter/widgets/Container-class.html -- Container class
-- decoration & color ; child 의 뒷부분을 색칠함.
-- foregroundDecoration ; child의 앞부분을 색칠함.
import 'package:flutter/material.dart';
void main() {
runApp(Container(
decoration: BoxDecoration(color: Colors.blueGrey[500]),
width: 200,
height: 300,
child: Center(
child: Text(
"hello",
textDirection: TextDirection.ltr,
),
),
));
}
-- 실행 결과 --
--> Container 사용해서, width, height 지정해도 전체 화면을 채움.
--> textDirection 없으면, error 발생.
** MaterialApp 사용한 기본 예제
https://api.flutter.dev/flutter/material/MaterialApp-class.html -- MaterialApp class
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Text(
"hello world",
),
)
);
}
-- 실행 결과 --
--> 화면 맨 위 부터 출력됨. (핸드폰 아이콘과 겹침)
--> MaterialApp 내부에서는, textDirection 없어도 에러 안남.
** MaterialApp --> safeArea 사용하기
https://api.flutter.dev/flutter/widgets/SafeArea-class.html -- SafeArea class
-- safeArea 는 MaterialApp 내에서 사용 가능.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: SafeArea(
child: Text(
"hello world2",
),
),
));
}
-- 실행 결과 --
화면 위의, 모바일 아이콘 영역 아래부터 화면 출력됨.
** MateraiApp --> Material widget 사용
https://api.flutter.dev/flutter/material/Material-class.html -- Material class
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Material(
child: Center(
child: Text(
"hello world6",
),
),
),
));
}
-- 실행 결과 --
-- 바탕색 바뀌고, 폰트 크기 정상으로 됨.
** MateraiApp --> Scaffold widget 사용
https://api.flutter.dev/flutter/material/Scaffold-class.html -- Scaffold class
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
body: Center(
child: Text(
"hello world7",
),
),
),
));
}
-- 실행 결과 --
-- 바탕색 바뀌고, 폰트 크기 정상으로 됨.
** MateraiApp --> Container widget 사용
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Container(
decoration: BoxDecoration(color: Colors.green[500]),
width: 300,
height: 300,
child: Text(
"hello world3",
),
)
)
);
}
-- 실행 결과 --
--> Container 사용해서, width, height 지정해도 전체 화면을 채움.
** MateraiApp --> Scaffold --> Container widget 사용
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
body: Container(
decoration: BoxDecoration(color: Colors.green[500]),
width: 300,
height: 300,
child: Center(
child: Text(
"hello world5",
),
),
),
)
)
);
}
-- 실행 결과 --
-- 드디어, Container widget 에서, width & height 작동함.
-- Text widget 의 폰트 크기도 정상 작동함.
** MateraiApp --> Material --> Container widget 사용
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Material(
child: Container(
decoration: BoxDecoration(color: Colors.green[500]),
width: 300,
height: 300,
child: Center(
child: Text(
"hello world8",
),
),
),
)
)
);
}
-- 실행 결과 --
-- font 는 제대로 나오지만, Container widget 은 제대로 반영안됨.
** 결론 **
MaterialApp + Scaffold 구조를 사용하자!!!
-- SafeArea 도 같이 ...
