Center
더보기
import 'package:flutter/material.dart';
// 앱 시작 부분
void main() {
runApp(MyApp());
}
// 시작 클랙스, 머티리얼 디자인 앱 생성!
class MyApp extends StatelessWidget {
// StatelessWidget 클래스는 상태를 가지지 않는 위젯을 구성하는 기본 클래스.
// (상태를 가지지 않는 다는 것은-> 한 번 그려진 후 다시 그리지 않는 경우이며,
// 프로퍼티로 변수를 가지지 않는다 다만 상수는 가질 수 있다.)
// StatelessWidget 은 build() 메서드를 가지고 있고 이 메서드는 위젯을 생성할 때 호출 되면서 화면에 그릴 위젯을
// 반환한다.
@override
Widget build(BuildContext context) {
return MaterialApp(
// title, theme, home 인수를 설정한다. (위젯의 속성을 표현)
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
// 시작 클래스가 실제로 표시하는 클래스,
// ignore: must_be_immutable
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("플러터 마스터"),
),
body: Center(
child: Container(
color: Colors.red,
width: 100,
height: 100,
),
),
);
}
}
Padding
- 안쪽 여백을 설정
- EdgeInsets 클래스를 사용하여 설정
(앞에 const를 붙여 컴파일 타임 상수로 설정할 경우 -> 다시 사용될 경우 메모리에 있는 값을 재사용하는 장점이 있다.) - EdgeInsets.all() -> 4방향 모두를 설정함
- EdgeInsets.only() -> 상하좌우 중에서 원하는 방향에만 값을 지정한다. (지정하지 않을 경우 기본 값 0.0)
- EdgeIsets.FromLTRB() -> 4 방향의 값을 각각 지정
Align
- 자식위젯의 정렬 방향을 정함
import 'dart:math';
import 'package:flutter/material.dart';
// 앱 시작 부분
void main() {
runApp(MyApp());
}
// 시작 클랙스, 머티리얼 디자인 앱 생성!
class MyApp extends StatelessWidget {
// StatelessWidget 클래스는 상태를 가지지 않는 위젯을 구성하는 기본 클래스.
// (상태를 가지지 않는 다는 것은-> 한 번 그려진 후 다시 그리지 않는 경우이며,
// 프로퍼티로 변수를 가지지 않는다 다만 상수는 가질 수 있다.)
// StatelessWidget 은 build() 메서드를 가지고 있고 이 메서드는 위젯을 생성할 때 호출 되면서 화면에 그릴 위젯을
// 반환한다.
@override
Widget build(BuildContext context) {
return MaterialApp(
// title, theme, home 인수를 설정한다. (위젯의 속성을 표현)
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
// 시작 클래스가 실제로 표시하는 클래스,
// ignore: must_be_immutable
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("플러터 마스터"),
),
body: Align(
alignment: Alignment.bottomRight,
child: Container(
color: Colors.red,
width: 100,
height: 100,
),
),
);
}
}
Expanded
- 자식 위젯의 크기를 -> 최대로 학장시켜 줌
- 여러 위젯에 동시에 적용할 경우 -> flex 프로퍼티에 정숫값을 지정하여 비율을 지정할 수 있음 (기본값은 1)
import 'dart:math';
import 'package:flutter/material.dart';
// 앱 시작 부분
void main() {
runApp(MyApp());
}
// 시작 클랙스, 머티리얼 디자인 앱 생성!
class MyApp extends StatelessWidget {
// StatelessWidget 클래스는 상태를 가지지 않는 위젯을 구성하는 기본 클래스.
// (상태를 가지지 않는 다는 것은-> 한 번 그려진 후 다시 그리지 않는 경우이며,
// 프로퍼티로 변수를 가지지 않는다 다만 상수는 가질 수 있다.)
// StatelessWidget 은 build() 메서드를 가지고 있고 이 메서드는 위젯을 생성할 때 호출 되면서 화면에 그릴 위젯을
// 반환한다.
@override
Widget build(BuildContext context) {
return MaterialApp(
// title, theme, home 인수를 설정한다. (위젯의 속성을 표현)
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
// 시작 클래스가 실제로 표시하는 클래스,
// ignore: must_be_immutable
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("플러터 마스터"),
),
// 여기서부터 수정!!!!!
body: Column(
children: <Widget>[
Expanded(
flex: 3,
child: Container(
color: Colors.red,
),
),
Expanded(
flex: 2,
child: Container(
color: Colors.yellow,
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.blue,
),
),
],
)
);
}
}
SizedBox
- 크기에 관련한 프로퍼티가 없는 위젯을 특정 크기로 만들고 싶을 때 사용
import 'dart:math';
import 'package:flutter/material.dart';
// 앱 시작 부분
void main() {
runApp(MyApp());
}
// 시작 클랙스, 머티리얼 디자인 앱 생성!
class MyApp extends StatelessWidget {
// StatelessWidget 클래스는 상태를 가지지 않는 위젯을 구성하는 기본 클래스.
// (상태를 가지지 않는 다는 것은-> 한 번 그려진 후 다시 그리지 않는 경우이며,
// 프로퍼티로 변수를 가지지 않는다 다만 상수는 가질 수 있다.)
// StatelessWidget 은 build() 메서드를 가지고 있고 이 메서드는 위젯을 생성할 때 호출 되면서 화면에 그릴 위젯을
// 반환한다.
@override
Widget build(BuildContext context) {
return MaterialApp(
// title, theme, home 인수를 설정한다. (위젯의 속성을 표현)
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
// 시작 클래스가 실제로 표시하는 클래스,
// ignore: must_be_immutable
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("플러터 마스터"),
),
// 여기서부터 수정!!!!!
body: SizedBox(
width: 100,
height: 100,
child: Container(
color: Colors.red,
),
),
);
}
}
Card
- 기본적으로 크기가 0이므로 -> 자식 위젯에 따라 크기가 결정된다.
- elevation -> 그림자의 깊이 조절 가능
- shape -> 카드 모양을 변경
import 'dart:math';
import 'package:flutter/material.dart';
// 앱 시작 부분
void main() {
runApp(MyApp());
}
// 시작 클랙스, 머티리얼 디자인 앱 생성!
class MyApp extends StatelessWidget {
// StatelessWidget 클래스는 상태를 가지지 않는 위젯을 구성하는 기본 클래스.
// (상태를 가지지 않는 다는 것은-> 한 번 그려진 후 다시 그리지 않는 경우이며,
// 프로퍼티로 변수를 가지지 않는다 다만 상수는 가질 수 있다.)
// StatelessWidget 은 build() 메서드를 가지고 있고 이 메서드는 위젯을 생성할 때 호출 되면서 화면에 그릴 위젯을
// 반환한다.
@override
Widget build(BuildContext context) {
return MaterialApp(
// title, theme, home 인수를 설정한다. (위젯의 속성을 표현)
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
// 시작 클래스가 실제로 표시하는 클래스,
// ignore: must_be_immutable
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("플러터 마스터"),
),
// 여기서부터 수정!!!!!
body: Center(
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
elevation: 7.0,
child: Container(
width: 100,
height: 100,
color: Colors.yellow,
),
),
),
);
}
}
'Flutter > 기본' 카테고리의 다른 글
| 화면 표시용 위젯 (Text, Image, Icon, Progress, CircleAvatar) (0) | 2021.06.15 |
|---|---|
| 버튼 계열 위젯 (ElevatedButton, TextButton, IconButton, FloatingActionButton) (0) | 2021.06.15 |
| 기본 위젯 2 (ListView, ListTitle, GridView, PageView, AppBar, TabBar, Tab, TabBarView, BottomNavigationBar) (0) | 2021.06.15 |
| 기본 위젯1 ( Container, column, row, stack, SingleChildScrollView) (0) | 2021.06.15 |
| StatefulWidget 실습 (0) | 2021.06.14 |
