Flutterで画面遷移を実現するには、次の2ステップで実装します。

• 画面となるWidgetを作る
• 画面遷移APIを呼ぶ

画面となるWidgetを作る

Flutterでの画面はWidgetのツリーです。Androidの Fragment やiOSの UIViewController のように、画面用の特別なクラスがあるわけではありません。

ここでは例として NextPage を作っておきます。

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Next Page")),
      body: Center(child: Text("画面その2だよ")),      
    );    
  }
}

画面遷移APIを呼ぶ

遷移先の画面ができたら、次はその画面に遷移するための処理を記述しましょう。 Navigator.push() を使います。ここでは例としてFABをタップしたときに画面遷移するようにしています。

// FABの部分だけ記述
FloatingActionButton(
    onPressed: () => Navigator.push(
      this.context,
      MaterialPageRoute(
        builder: (context) => NextPage())
    ),
    tooltip: 'Next',
    child: Icon(Icons.arrow_right),
)