728x90
Flutter에서 screen 과 page 는 route 로 불린다.
Route는 Android의 Activity, iOS의 ViewController와 동일하다.
Flutter에서는 Route 역시 위젯이다.
새로운 route로 이동은 Navigator를 사용한다.
Navigator.push()를 사용하여 두 번째 route로 전환한다.
Navigator.pop()을 사용하여 첫 번째 route로 되돌아 온다.
|
import 'package:link2me/route.dart';
import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: FirstRoute(),
);
}
}
|
|
import 'package:flutter/material.dart';
class FirstRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Route'),
),
body: Center(
child: ElevatedButton(
child: Text('Open route'),
onPressed: () {
// 눌렀을 때 두 번째 route로 이동
// push() 메서드는 Route를 Navigator에 의해 관리되는 route 스택에 추가
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
},
),
),
);
}
}
class SecondRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Route"),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// pop() 메서드는 route 스택에서 현재 Route를 제거
Navigator.pop(context);
},
child: Text('Go back!'),
),
),
);
}
}
|
자료 출처 : https://docs.flutter.dev/cookbook/navigation/navigation-basics
Navigator.pushNamed()를 통한 화면전환
출처 : https://docs.flutter.dev/cookbook/navigation/named-routes
Route 정의하기
다음으로, MaterialApp 생성자에 initialRoute와 routes 이름의 추가 프로퍼티를 제공하여 route를 정의한다.
initialRoute 프로퍼티는 앱의 시작점을 나타내는 route를 정의하고,
routes 프로퍼티는 이용가능한 named route와 해당 route로 이동했을 때 빌드될 위젯을 정의한다.
|
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: '/',
routes: {
// "/" Route로 이동하면, FirstRoute 위젯을 생성한다.
'/': (context) => FirstRoute(),
// "/second" route로 이동하면, SecondRoute 위젯을 생성한다.
'/second': (context) => SecondRoute(),
},
//home: FirstRoute(),
);
}
|
|
import 'package:flutter/material.dart';
class FirstRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Route'),
),
body: Center(
child: ElevatedButton(
child: Text('Open route'),
onPressed: () {
// 눌렀을 때 두 번째 route로 이동
// push() 메서드는 Route를 Navigator에 의해 관리되는 route 스택에 추가
// Navigator.push(
// context,
// MaterialPageRoute(builder: (context) => SecondRoute()),
// );
// Named route를 사용하여 두 번째 화면으로 전환
Navigator.pushNamed(context, '/second');
},
),
),
);
}
}
class SecondRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Route"),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// pop() 메서드는 route 스택에서 현재 Route를 제거
Navigator.pop(context);
},
child: Text('Go back!'),
),
),
);
}
}
|
화면 전환 코드가 포함된 예제이다.
|
import 'package:flutter/material.dart';
import 'package:myapp/listview_demo1.dart';
class CallsfloatBtn extends StatefulWidget {
const CallsfloatBtn({Key? key}) : super(key: key);
@override
_CallsfloatBtnState createState() => _CallsfloatBtnState();
}
class _CallsfloatBtnState extends State<CallsfloatBtn> {
int _counter = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center, // 중앙정렬
children: <Widget>[
Text(
'당신은 버튼을 눌렀어요 :',
softWrap: false, // 텍스트가 영역을 넘어갈 경우 줄바꿈 여부
style: Theme.of(context).textTheme.headline5,
),
Text(
'$_counter 번',
style: TextStyle(fontSize: 25),
),
ElevatedButton(
child: Text('화면 이동'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ListView_Demo1())
);
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.teal),
padding: MaterialStateProperty.all(EdgeInsets.all(15)),
textStyle: MaterialStateProperty.all(TextStyle(fontSize: 14))),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
void _incrementCounter() {
setState(() {
_counter++;
});
}
}
|
|
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
// Android Studio 에서 stless 를 입력후 엔터키를 치면
// 자동완성 코드가 작성되고 클래스명을 지정하면 된다.
class ListView_Demo1 extends StatelessWidget {
const ListView_Demo1({Key? key}) : super(key: key);
// ListView 위젯 정적 데모
static const List<String> _data = [
'Mercury(수성)',
'Venus(금성)',
'Earth(지구)',
'Mars(화성)',
'Jupiter(목성)',
'Saturn(토성)',
'Uranus(천왕성)',
'Neptune(해왕성)',
'Pluto(명왕성)',
];
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: CupertinoNavigationBar(
leading: CupertinoNavigationBarBackButton(
onPressed: () => Navigator.of(context).pop(),
),
middle: Text('쿠퍼티노 UI'),
trailing: GestureDetector(
child: Icon(CupertinoIcons.search),
onTap: (){},
),
backgroundColor: CupertinoColors.activeGreen,
border: Border(
bottom:BorderSide(
width: 1,
color: CupertinoColors.activeGreen,
style: BorderStyle.solid
)
),
),
//body: _buildStaticListView(),
body: _buildStaticListViewSeperated(),
),
);
}
Widget _buildStaticListView() {
return ListView.builder(
itemCount: _data.length,
itemBuilder: (BuildContext _context, int i) {
return ListTile(
title: Text(_data[i],
style: TextStyle(
fontSize: 23,
)),
trailing: Icon(
Icons.favorite_border,
),
);
},
);
}
Widget _buildStaticListViewSeperated() {
return ListView.separated(
itemCount: _data.length,
itemBuilder: (BuildContext _context, int i) {
return ListTile(
title: Text(_data[i],
style: TextStyle(
fontSize: 23,
)),
trailing: Icon(
Icons.favorite_border,
),
);
},
separatorBuilder: (BuildContext _context, int i) {
return const Divider();
},
);
}
}
|
'Flutter 앱 > Flutter Basic' 카테고리의 다른 글
| Flutter Widget 개념(stateless, stateful) (0) | 2022.06.18 |
|---|---|
| Flutter input dialog (자식 → 부모) (0) | 2022.06.15 |
| Flutter showDialog and AlertDialog Widget (부모 → 자식) (0) | 2022.06.14 |
| Flutter ListView 예제1 (0) | 2021.12.27 |
| Flutter Toast 메시지 (0) | 2021.12.24 |
Link2Me