728x90
들어가기 앞서...
플러터 앱에서 버튼을 클릭해 화면 전환 하는 것을 알아 볼 것이다.
본문으로...
1. AppBar!
앱바는 도구 모음과 잠재적으로 TabBar 및 FlexibleSpaceBar 와 같은 기타 위젯으로
leading : 이 위젯은 제목 앞에 표시할 위젯이다.
title : 제목 위젯 으로, 한줄로 표시할 위젯 목록이다.
actions : 이 위젯은 제목 위젯 뒤에 위치하며, 한 줄로 표시될 위젯리스트 이다.
flexibleSpace : 이 위젯은 도구 모음과 탭 표시줄 뒤에 쌓입니다. 높이는 앱 바의 전체 높이와 동일하다.
bottom : 이 위젯은 앱 하단에 표시된다.
2. placeholder
개발중에 인터페이스가 아직 개발 되지않음을 나타낸다, 이 자리에 무엇이 들어갈것을 알려주는 상자
body : const Center(
child: Placeholder(),
)
3. Navigator
플러터에서 제공하는 위젯으로, 플랫폼에서 Navigator 올바르게 전환 애니메이션을 사용해 화면을 스택으로 표시한다.
웹에서의 지원 : RouterHistory API 항목이 브라우저의 기록 스택에 추가 되어, 뒤로 가기 버튼을 누를시 시간 역순으로 탐색된다.
즉, 사용자가 페이지에서 Navigator 를 pop한 다음 브라우저 뒤로 버튼을 누르면 이전 페이지가 스택으로 다시 푸쉬된다.
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const SongScreen(song: song),
),
);
},
child: Text(song.name),3-1. 명명된 경로 사용를 사용해 라우팅 처리
플러터에서는 대부분의 앱에서 명명된 경로로 라우팅 처리하는 것을 권장하지 않는다고 한다.
주의 사항 : 명명된 경로 사용은 딥링크 처리 가능하지만, 동작은 항상 동일해서 사용자가 지정 못한다. 브라우저 앞으로 버튼도 지원하지 않으니 주의
@override
Widget build(BuildContext context) {
return MaterialApp(
routes: {
'/': (context) => HomeScreen(),
'/details': (context) => DetailScreen(),
},
);
}
3-2. 라우터 사용
고급 탐색이나 라우팅에 추가적으로 요구사항이 있는 플러터 앱인 경우, 경로 구문 분석하고 앱 수신시 마다 구성가능한 go_router Navigator 같은 라우팅 패키지를 사용해야한다.
go_router 와 같은 패키지는 선언적으로 딥링크를 수신할때마다 항상 동일한 화면 표시한다.
MaterialApp.router(
routerConfig: GoRouter(
// …
)
);
3-3. Navigator 를 사용한 화면 전환
import 'package:flutter/material.dart';
class NaviGatorPage extends StatelessWidget {
const NaviGatorPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('hello Home'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Center(
child: Text(
'home page',
style: Theme.of(context).textTheme.headline4,
),
),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const NavigatorFirstPage()));
},
child: const Text('NextPage 로 이동'))
],
),
);
}
}
// firstPage
class NavigatorFirstPage extends StatelessWidget {
const NavigatorFirstPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('NavigatorFirstPage'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Center(
child: Text(
'hello This is NavigatorFirstPage',
),
),
const Icon(Icons.ac_unit),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const NavigatorSecondPage()));
},
child: const Text('PrevPage 로 이동')),
],
),
);
}
}
// secondPage
class NavigatorSecondPage extends StatelessWidget {
const NavigatorSecondPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('NavigatorSecondPage'),
leading: IconButton(
icon: const Icon(Icons.close),
onPressed: () {
Navigator.pop(context);
},
),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Center(
child: Text(
'hello This is NavigatorSecondPage',
style: Theme.of(context).textTheme.bodyText1,
),
),
],
),
);
}
}
4. 아이콘!
플러터에서 기본 제공하는 아이콘 위젯이다.
body: const Center(
children: const <Widget>[
Icon(
Icons.favorite,
color: Colors.pink,
size: 24.0,
semanticLabel: 'Text to announce in accessibility modes',
),
Icon(
Icons.audiotrack,
color: Colors.green,
size: 30.0,
),
Icon(
Icons.beach_access,
color: Colors.blue,
size: 36.0,
),
],
)
5. BottomNavigationBar
BottomNavigationBar 위젯을 사용해보자!
return Scaffold(
appBar: AppBar(title: const Text('title')),
body: const Center(child: Placeholder()),
bottomNavigationBar: BottomNavigationBar(
// 기본 default index 설정
currentIndex: 1,
// BottomNavigationBar 사용할 때는 제네릭 타입 꼭 선언해줘야한다. const <BottomNavigationBarItem>
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.star), label: 'star'),
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'home'),
BottomNavigationBarItem(icon: Icon(Icons.menu), label: 'menu'),
]),
);
6. StatefulWidget으로 변경!
StatefulWidget으로 변경해서, 상태값 관리 하자!
클릭했을때 해당 인덱스로 포커싱 되는 것을 볼 수 있다!
import 'dart:ffi';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class BottomNavigationBarPage extends StatefulWidget {
const BottomNavigationBarPage({super.key});
@override
State<BottomNavigationBarPage> createState() =>
_BottomNavigationBarPageState();
}
class _BottomNavigationBarPageState extends State<BottomNavigationBarPage> {
int _index = 2;
double _slider = 0;
TextEditingController _text = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('title')),
body: Center(
child: Column(
children: [
const Placeholder(),
Slider(
value: _slider,
onChanged: (value) => setState(() {
_slider = value;
}),
),
Text('slider : ${(_slider * 100).toStringAsFixed(0)}'),
TextField(
controller: _text,
textAlign: TextAlign.center,
decoration: const InputDecoration(hintText: '숫자만 입력하세요.'),
inputFormatters: [
FilteringTextInputFormatter.digitsOnly,
FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
],
onSubmitted: (value) => setState(() {
if (double.parse(value) > 100) {
_slider = 1;
_text.text = '100';
}
if (double.parse(value) <= 100) {
_slider = double.parse(value) * 0.01;
}
}),
)
],
),
),
bottomNavigationBar: BottomNavigationBar(
// 기본 default index 설정
currentIndex: _index,
onTap: (value) => setState(() {
_index = value;
}),
// BottomNavigationBar 사용할 때는 제네릭 타입 꼭 선언해줘야한다. const <BottomNavigationBarItem>
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.star), label: 'star'),
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'home'),
BottomNavigationBarItem(icon: Icon(Icons.menu), label: 'menu'),
]),
);
}
}끝으로...
- Icon 과 plackholder, bottomNavigationBar 위젯 사용법을 알았다!
- Navigator 를 사용해 라우팅 처리 가능하다!
728x90