Изучение различных методов навигации с помощью Flutter Navigator.push()

Во Flutter навигация является важной частью создания мобильных приложений. Метод Navigator.push()позволяет переходить от одного экрана к другому в вашем приложении. В этой статье мы рассмотрим различные методы использования Navigator.push()и предоставим примеры кода для каждого подхода. Давайте погрузимся!

  1. Базовая навигация.
    Самый простой способ навигации с помощью 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')),
    );
  }
}
  1. Именованные маршруты.
    Использование именованных маршрутов обеспечивает более организованный и удобный подход к навигации. Вот пример:
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')),
    );
  }
}
  1. Передача данных.
    Вы также можете передавать данные между экранами во время навигации. Вот пример:
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)),
    );
  }
}
  1. Использование 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. Приятного кодирования!