特定の期間のグリーティング画面の表示

Question

一定期間後に消えるウィジェットの作成に関する情報を見つけようとしています。私は、アプリケーションが実行され、数秒後に消えると表示される挨拶ページを作成しようとしています。その後私のホームページに移動します。

これを行うには正しい方向はありますか？

私はボタンでshowDialogを使用する方法を理解していますが、アプリケーションの起動時にgreetingsビューを最初のビューにしたいので、showDialogを正しく使用するにはどうすればいいですか？

void main() { 
    runApp(new MaterialApp(
    home: new SignIn(),//how to integrate showDialog with my flow 
)) 
} 

Answer 1

PageRouteBuilderとNavigatorState.pushReplacementを使用して 'グリーティングページ' と、あなたの家の間の遷移の完全なコード：

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

void main() { 
    runApp(new MaterialApp(
    home: new Greeting(), 
)); 
} 

class Greeting extends StatefulWidget { 
    @override 
    _GreetingState createState() => new _GreetingState(); 
} 

class _GreetingState extends State<Greeting> { 
    @override 
    initState() { 
    super.initState(); 
    new Timer(const Duration(seconds: 5), onClose); 
    } 

    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     body: new Align(
      alignment: FractionalOffset.center, 
      child: new Column(
      mainAxisAlignment: MainAxisAlignment.center, 
      children: <Widget>[ 
       new Text(
       "Hello you !", 
       style: Theme.of(context).textTheme.display1, 
      ), 
       new Row(
       mainAxisAlignment: MainAxisAlignment.center, 
       children: <Widget>[ 
        new Text("Here's a unicorn for your"), 
        new Image.network(
        "https://i.pinimg.com/736x/3b/06/ef/3b06efe25fed62de2960090ff2b8d83a--cute-cartoon-drawings-drawings-of.jpg", 
        height: 42.0, 
        width: 42.0, 
       ), 
       ], 
      ) 
      ], 
     )), 
    ); 
    } 

    void onClose() { 
    Navigator.of(context).pushReplacement(new PageRouteBuilder(
     maintainState: true, 
     opaque: true, 
     pageBuilder: (context, _, __) => new Home(), 
     transitionDuration: const Duration(seconds: 2), 
     transitionsBuilder: (context, anim1, anim2, child) { 
      return new FadeTransition(
      child: child, 
      opacity: anim1, 
     ); 
     })); 
    } 
} 

class Home extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(
     backgroundColor: Colors.pink, 
     title: new Text("Home"), 
    ), 
    ); 
    } 
} 

Answer 2

このようなことには、タイマーとナビゲータを使用できます。

我々は showDialog(child: new TimedWidget(), context: context);

で呼び出さステートフルTimedWidget、と考えることができ、そのウィジェットのコードのようなものだろう：あなたは気づいているかもしれません

：

initState() { 
    super.initState(); 
    timer = new Timer(const Duration(seconds: 5), onCloseDialog); 
    } 

    void onCloseDialog() { 
    if (mounted) { 
     Navigator.of(context).pop(); 
    } 
    } 

編集をビルドメソッド内でshowDialog/NavigatorState.pushを実行することはできません。 ボタンを押さずにページ/ポップインを直接作成したい場合は、いくつかの解決策があります。

ページでは、GreetingPageをrunAppに直接読み込むことができます。 そして、挨拶のページは数秒後に家に帰るでしょう。 通常、あなたはあなたのGreetingPageでこのようなものがあるだろう：あなたは、フレームによって、あなたのダイアログの出現を遅らせるために使用して、別のタイマーを持つことができるダイアログについて、

initState() { 
    super.initState(); 
    new Timer(const Duration(seconds: 5), onClose); 
    } 

    void onClose() { 
    Navigator.of(context).pushReplacement(new PageRouteBuilder(
     maintainState: true, 
     opaque: true, 
     pageBuilder: (context, _, __) => new Home(), 
     transitionDuration: const Duration(milliseconds: 250), 
     transitionsBuilder: (context, anim1, anim2, child) { 
      return new FadeTransition(
      child: child, 
      opacity: anim1, 
     ); 
     })); 
    } 

簡単に。 ここでは、この必要があるだろう：

initState() { 
    super.initState(); 
    new Timer(const Duration(),() { 
     showDialog(context: context, child: new SimpleDialog(
     title: new Text("Hello world"), 
    )); 
    }); 
    }