Flutter : 画面遷移

Xamarin –> Flutter の準備ができたので、

https://www.typea.info/blog/index.php/2019/10/03/xamarin_flutter

なれるために、基本的な機能を試してみる。

まずは画面遷移

https://flutter.dev/docs/cookbook/navigation/navigation-basics

呼び出し元

RaisedButton(
  onPressed: (){
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SecondRoute()),
    );
  },
  child: const Text('Open Second Screen'),

遷移先

import 'package:flutter/material.dart';

class SecondRoute extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: <Widget>[
            Text(
              'Second Screen.',
            ),
            RaisedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('Back'),
            ),
          ]
        ),
      ),
    );
  }
}

jQueryで、UIのプラグイン作成する感覚に近いな。

遷移先の画面を、マテリアルデザインでステートフルにする場合

import 'package:flutter/material.dart';

class ThirdRoute extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ThirdRouted();
  }
}

class _ThirdRouted extends State<ThirdRoute> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(),
    );
  }
}

Follow me!

@pppiroto