- Column : 세로방향에 대한 레이아웃을 잡을 때 사용합니다.
- mainAxisSize : 세로 방향에 대한 크기
- mainAxisAlignment : 세로 방향에 대한 정렬
- crossAxisAlignment : 가로 방향에 대한 정렬
- Row : 가로방향에 대한 레이아웃을 잡을 때 사용합니다.
- mainAxisAlignment : 가로 방향에 대한
- crossAxisAlignment : 세로 방향에 대한 정렬
- Stack : 화면에 위젯을 쌓고 싶을 때 사용하는 위젯입니다.
- children에서 아래에 있는 위젯이 더 위에 표시됩니다.
- alignment를 이용해 자식 위젯을 이동시킬 수 있습니다.
Stack(
children: [ // 자식 위젯들
Text("위젯1"),
Text("위젯2"),
],
),
- SingleChildScrollView : Child 위젯이 화면의 스크린보다 큰 경우, 스크롤 할 수 있도록 만들어줍니다.
SingleChildScrollView(
child: Container(height: 10000), // 자식 위젯
),
- TextField : 텍스트 입력을 받을 때 사용됩니다.
TextField(
autofocus: true, // 자동 포커스
onChanged: (text) {
// 텍스트 변경시 실행되는 함수
},
onSubmitted: (text) {
// Enter를 누를 때 실행되는 함수
},
),
- Button
```dart
// 위로 올라와 있는 듯한 버튼
ElevatedButton(
onPressed: () {
print("Elevated Button 클릭");
},
child: Text('Elevated Button'),
),
// 텍스트 버튼
TextButton(
onPressed: () {
print("Text Button 클릭");
},
child: Text('Text Button'),
),
// 아이콘 버튼
IconButton(
onPressed: () {
print("Icon Button 클릭");
},
icon: Icon(Icons.add),
),
- 화면이동 : Flutter에는 각 화면을 라우트(Route)라고 부르며, 화면을 이동할 때 네비게이터(Navigator)를 사용합니다.
- 화면이 많아지게 되면 named-routes 기능을 사용하기도 한다.
이동하기
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()), // 이동하려는 페이지
);
- 화면 닫기
Navigator.pop(context); // 종료
- 예제
/// Copyright 2022. ⓒ DevStory.co.kr All rights reserved.
// ignore_for_file: prefer_const_constructors
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(
debugShowCheckedModeBanner: false,
home: FirstPage(),
);
}
}
// 첫 번째 페이지
class FirstPage extends StatelessWidget {
const FirstPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("홈"),
),
body: Center(
child: ElevatedButton(
child: Text("다음 페이지로 이동"),
onPressed: () {
// 페이지 이동
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
);
},
),
),
);
}
}
// 두 번째 페이지
class SecondPage extends StatelessWidget {
const SecondPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("두 번째 페이지 입니다!"),
),
backgroundColor: Colors.amber,
body: Center(
child: ElevatedButton(
child: Text("첫 번째 페이지로 되돌아가기"),
onPressed: () {
// 뒤로가기
Navigator.pop(context);
},
),
),
);
}
}