사용자가 적어서 그런가 왜 이런걸 정리해놓은 사람이 보이질 않는 걸까..
flutter 공식 문서를 번역기로 번역해서 머리에서 받아들인 내용만 정리한 것이라 틀린 내용이나 누락된 내용이 있을 수 있다.
구글아... 이걸 설명이라고 써놓은거니..
별 도움도 안되는 거지같은 영상 좀 작작 찍고 그 자원으로 공식 문서나 개선해라 제발..
flutter 어플 기본 트리 구조
void main() {
|
|---|
화면 전환방법
다른 화면 띄우기
https://docs.flutter.dev/cookbook/navigation/navigation-basics
대체로 버튼을 눌렀을 때 onPressed 작동시 MaterialPageRoute에서 특정 화면 Class를 작동시키게 만든다.
예시)
{$Layout}() {
child/children:
{$Button}(
onPressed: () {
Navigator.of(context).push(
MaterialPageRout(builder: (BuildContext context) => {$ScreenClassName}
);
)
}
)
}
이전 화면으로 돌아가는 방법
마찬가지로 버튼을 눌렀을 때 onPressed 옵션에 Navigator.of.pop() 명령을 사용한다.
{$Layout}() {
child/children:
{$Button}(
onPressed: () {Navigator.of(context).pop();}
)
}
탭 이동
https://docs.flutter.dev/cookbook/design/tabs
사실상 새 화면을 불러오는게 아니라 여러개의 화면을 상시로 실행해놓고 요청한 화면만 보여주는 형식.
다음은 fltter doc 페이지에서 제공하는 기본 코드를 살짝 변경한 것이다.
다음 코드를 실행한 다음, tab4 탭을 클릭해도 tab4로 전환되지 않는데, 그 이유는 DefaultTabController의 length 값이 4가 아닌 3이기 때문이다.
구현한 탭을 모두 노출하기위해서는 length의 값과 tabs.length, children.length가 모두 동일한 값이어야 한다.
length와 tabs.lentgh가 모두 4이고, children.length가 3인 경우 4번째 tab을 호출하면 3번 탭의 내용을 보여주는 것을 확인할 수 있다.
import 'package:flutter/material.dart';
void main() {runApp(const TabBarDemo());}
class TabBarDemo extends StatelessWidget {
const TabBarDemo({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar( bottom: const TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(text: 'tab2'),
Tab(icon: Icon(Icons.directions_bike)),
Tab(text: 'tab4') ],
),
title: const Text('Tabs Demo'),
),
body: const TabBarView(
children: [
Text('if you press Tab1, you can see this Text.'),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
Text('if you press Tab4, you can see this Text.') ],
),
),
),
);
}
}