右に滑って前のページに戻る

前言

準備ツール

スモールインスタンス開発プロセス

キーコード

を追加

ルーティング新しいページ

前言

現在のアプリはユーザーの体験感を高めるために、右にスライドして前のページに戻る効果を実現していますが、今日はflutterで実現します

ツールの準備

このコースはAndroid Studioを採用して開発されています.現在はその前にFlutter開発環境を用意してください.ここでは説明しません.

小規模インスタンス開発プロセス

キーコードを追加

実はこの効果は非常によく実現して、1つのコードplatformを増加します:TargetPlatform.iOS,

import 'package:flutter/material.dart';
import './index_page.dart';
import './navigation.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        title: " ",
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          platform: TargetPlatform.iOS,
          primaryColor: Colors.blue
        ),
        home: NavigationPage(),
      ),
    );
  }
}

新しいページをルーティング

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

class IndexPage extends StatelessWidget {
  const IndexPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body:Container(
        child: Center(
          child: RaisedButton(
            onPressed: (){
              Navigator.push(
                context, 
                new MaterialPageRoute(builder: (context)=>HomePage())
              );
            },
            child: Text(' , '),

          ),
        ),
      )
    );
  }
}

この例はとても简単で、みんなは私のgithubまでソースコードをダウンロードすることができて、直接见て、みんなを助けることができることを望みます