bigmac-jp blog

web開発関連のメモ

Flutter メモ1 画面遷移

Navigatorクラスを使った画面遷移のメモ

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PageTop(),
      routes:<String, WidgetBuilder>{
        '/page_top': (BuildContext context) => new PageTop(),
        '/page_1': (BuildContext context) => new Page1(),
        '/page_2': (BuildContext context) => new Page2(),
      }
    );
  }
}

class PageTop extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: Text('PageTop')),
      body: Center(
        child: RaisedButton(
            child: Text('Go to Page1!'),
            onPressed: (){
              Navigator.pushNamed(context, '/page_1');
            }
        ),
      ),
    );
  }
}

class Page1 extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: Text('Page1')),
      body: Center(
        child: RaisedButton(
            child: Text('Go to Page2!'),
            onPressed: (){
              Navigator.pushNamed(context, '/page_2');
            }
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: Text('Page2')),
      body: Center(
        child: RaisedButton(
            child: Text('Go to PageTop!'),
            onPressed: (){
              Navigator.pushNamed(context, '/page_top');
            }
        ),
      ),
    );
  }
}