ex33. Route

 

✅ Route 사용

 

import 'package:flutter/material.dart';

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

  // 라우팅 -> 이름을 기준으로 경로를 연결하여 관리하는 기술!

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  Navigator.pushNamed(context, '/red');
                },
                child: Text('red'),
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.red,
                  surfaceTintColor: Colors.red,
                  foregroundColor: Colors.white,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  Navigator.pushNamed(context, '/green');
                },
                child: Text('green'),
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.green,
                  surfaceTintColor: Colors.green,
                  foregroundColor: Colors.white,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  Navigator.pushNamed(context, '/blue');
                },
                child: Text('blue'),
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.blue,
                  surfaceTintColor: Colors.blue,
                  foregroundColor: Colors.white,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'package:flutter0613/mainPage.dart';
import 'package:flutter0613/popPage.dart';
import 'package:flutter0613/screen/routePage.dart';

import 'package:flutter0613/screen/redPage.dart';
import 'package:flutter0613/screen/greenPage.dart';
import 'package:flutter0613/screen/bluePage.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(

      // 라우트 기법은 App에서 연결을 해야 한다!
      routes: {
        '/red' : (context) => RedPage(),
        '/green' : (context) => GreenPage(),
        '/blue' : (context) => BluePage(),
      },

      // home: mainPage(),
      // home: popMainPage(),
      home: RoutePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.green,
      ),
    );
  }
}

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.blue,
      ),
    );
  }
}

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.red,
      ),
    );
  }
}

 

✅ config 추가

import 'package:flutter/material.dart';

import 'package:flutter0613/mainPage.dart';
import 'package:flutter0613/popPage.dart';
import 'package:flutter0613/screen/routePage.dart';

import 'package:flutter0613/screen/redPage.dart';
import 'package:flutter0613/screen/greenPage.dart';
import 'package:flutter0613/screen/bluePage.dart';

import 'config/routeName.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(

      // 라우트 기법은 App에서 연결을 해야 한다!
      // routes: {
      //   '/red' : (context) => RedPage(),
      //   '/green' : (context) => GreenPage(),
      //   '/blue' : (context) => BluePage(),
      // },

      routes: rn,

      // home: mainPage(),
      // home: popMainPage(),
      home: RoutePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

import 'package:flutter0613/screen/bluePage.dart';
import 'package:flutter0613/screen/greenPage.dart';
import 'package:flutter0613/screen/redPage.dart';

class RouteName {

  // 경로는 변하지 않아야 하므로 const 키워드 사용!
  // static은 해당하는 RouteName 클래스가 사용됨과 동시에 변수에 대한 내용이 초기화 되도록 작업!
  static const redPage = '/red';
  static const greenPage = '/green';
  static const bluePage = '/blue';

}

var rn = {
  RouteName.redPage : (context) => RedPage(),
  RouteName.greenPage : (context) => GreenPage(),
  RouteName.bluePage : (context) => BluePage(),
};