Во Flutter навигация является важной частью создания мобильных приложений. Метод Navigator.push()
позволяет переходить от одного экрана к другому в вашем приложении. В этой статье мы рассмотрим различные методы использования Navigator.push()
и предоставим примеры кода для каждого подхода. Давайте погрузимся!
- Базовая навигация.
Самый простой способ навигации с помощьюNavigator.push()
— вызвать его непосредственно в методеbuild()
. Вот пример:
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Home')),
body: Center(
child: ElevatedButton(
child: Text('Go to Details'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => DetailsPage()),
);
},
),
),
);
}
}
class DetailsPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Details')),
body: Center(child: Text('Details Page')),
);
}
}
- Именованные маршруты.
Использование именованных маршрутов обеспечивает более организованный и удобный подход к навигации. Вот пример:
import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => HomePage(),
'/details': (context) => DetailsPage(),
},
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Home')),
body: Center(
child: ElevatedButton(
child: Text('Go to Details'),
onPressed: () {
Navigator.pushNamed(context, '/details');
},
),
),
);
}
}
class DetailsPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Details')),
body: Center(child: Text('Details Page')),
);
}
}
- Передача данных.
Вы также можете передавать данные между экранами во время навигации. Вот пример:
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Home')),
body: Center(
child: ElevatedButton(
child: Text('Go to Details'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailsPage(data: 'Hello from Home'),
),
);
},
),
),
);
}
}
class DetailsPage extends StatelessWidget {
final String data;
DetailsPage({required this.data});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Details')),
body: Center(child: Text(data)),
);
}
}
- Использование MaterialPageRoute и CupertinoPageRoute:
Flutter предоставляет две разные реализации маршрута страницы:MaterialPageRoute
иCupertinoPageRoute
. Первый используется для приложений на основе Material Design, а второй — для приложений в стиле iOS. Вот пример:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Home')),
body: Center(
child: ElevatedButton(
child: Text('Go to Details'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => DetailsPage()),
// CupertinoPageRoute(builder: (context) => DetailsPage()), // for iOS style
);
},
),
),
);
}
}
class DetailsPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Details')),
body: Center(child: Text('Details Page')),
);
}
}
В этой статье мы рассмотрели несколько методов использования Navigator.push()
во Flutter. Мы рассмотрели базовую навигацию, именованные маршруты, передачу данных и использование различных реализаций маршрутов страниц. Используя эти методы, вы можете создавать мощные и динамичные потоки навигации в своих приложениях Flutter. Приятного кодирования!