[Flutter 플러터] 9. Flutter에서 화면 이동하기

 

Flutter에서 화면 이동하기

1. 상태를 관리해서 화면 이동하기

import 'package:english_words/english_words.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

const assetImagePath = 'assets/images';
const bannerImage = '$assetImagePath/apple.jpeg';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.lightBlue,
            title: const Text('flutter에서 화면 이동하기'),
          ),
        body: const HomeWidget()
      ),
    ),
  );
}

class HomeWidget extends StatefulWidget {
  const HomeWidget({super.key});

  @override
  State<HomeWidget> createState() => _HomeWidgetState();
}

class _HomeWidgetState extends State<HomeWidget> {
  late int index;

  @override
  void initState(){
    super.initState();
    index = 0;
  }

  Widget build(BuildContext context) {
    return Scaffold(
      body: homeBody(),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'User'),
        ],
        currentIndex: index,
        onTap: (newIndex) => setState(() {
          index = newIndex;
        }),
      ),
    );
  }

  Widget homeBody() {
    switch(index) {
      case 1: return const Center(child: Icon(Icons.search, size: 100),);
      case 2: return const Center(child: Icon(Icons.person, size: 100),);
      case 0: default: return const Center(child: Icon(Icons.home, size: 100),);
    }
  }
}

반응형

 

 

 

2. 내비게이터 객체 활용해서 화면 이동하기

 

lib 폴더에 screen 폴더 생성 후 new_page 다트 파일을 만들었다.

 

main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_example/screen/new_page.dart';

const assetImagePath = 'assets/images';
const bannerImage = '$assetImagePath/apple.jpeg';

void main() {
  runApp(const MaterialApp(
    home: HomeWidget(),
  ));
}

class HomeWidget extends StatelessWidget {
  const HomeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter에서 화면 이동하기'), backgroundColor: Colors.blue,
      ),
      body: Center(
        child: TextButton(
          child: const Text('go to page'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const NewPage(),
              ),
            );
          },
        ),
      ),
    );
  }
}

 

 

 

new_page.dart

import 'package:flutter/material.dart';

class NewPage extends StatelessWidget {
  const NewPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Weclome new page'),
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: [
            TextButton(
              child: const Text('go to back'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            TextButton(
              child: const Text('go to new page2'),
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) => NewPage2()));
              },
            ),
          ],
        ),
      ),
    );
  }
}

class NewPage2 extends StatelessWidget {
  const NewPage2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Weclome new page2'),
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: [
            TextButton(
              child: Text('go to back'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            TextButton(
              child: Text('go to home'),
              onPressed: () {
                Navigator.popUntil(context, (route) => route.isFirst);
              },
            )
          ],
        ),
      ),
    );
  }
}

 

728x90

 

 

 

 

3. 외부 라이브러리 활용해서 화면 이동하기

 

pubspec.ymal에 go_router를 붙여 넣었다.

붙여 넣고 Pub get 하기.

 

main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_example/screen/new_page.dart';
import 'package:go_router/go_router.dart';

const assetImagePath = 'assets/images';
const bannerImage = '$assetImagePath/apple.jpeg';

void main() {
  runApp(
      MaterialApp.router(
        routerConfig: GoRouter(
          initialLocation: '/',
          routes: [
            GoRoute(path: '/', name: 'home', builder: (context, _) => const HomeWidget()),
            GoRoute(path: '/new', name: 'new', builder: (context, _) => const NewPage()),
            GoRoute(path: '/new1', name: 'new1', builder: (context, _) => const NewPage2()),
          ]
        ),
  ));
}

class HomeWidget extends StatelessWidget {
  const HomeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter에서 화면 이동하기'), backgroundColor: Colors.orange,
      ),
      body: Center(
        child: TextButton(
          child: const Text('go to page'),
          onPressed: () {
            context.pushNamed('new');
          },
        ),
      ),
    );
  }
}

 

 

 

new_page.dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

class NewPage extends StatelessWidget {
  const NewPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Weclome new page'),
        backgroundColor: Colors.orange,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: [
            TextButton(
              child: const Text('go to back'),
              onPressed: () => context.pop(),
            ),
            TextButton(
              child: const Text('go to new page2'),
              onPressed: () => context.pushNamed('new1'),
            ),
          ],
        ),
      ),
    );
  }
}

class NewPage2 extends StatelessWidget {
  const NewPage2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Weclome new page2'),
        backgroundColor: Colors.orange,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: [
            TextButton(
              child: Text('go to back'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            TextButton(
              child: Text('go to home'),
              onPressed: () {
                context.goNamed('home');
              },
            )
          ],
        ),
      ),
    );
  }
}