Flutter - Routing between different Views

Question

So, I have this file:

import 'package:flutter/material.dart';
import "calculateDerivations.dart";
import "calculateRoots.dart";

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Ableitungen berechnen'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {

    return new Scaffold(
      appBar: new AppBar(title: new Text(config.title)),
      body: new Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          new InputWidget(),
        ]
      ),
    );
  }
}

class InputWidget extends StatefulWidget {
  @override
  InputWidgetState createState() => new InputWidgetState();
}

class InputWidgetState extends State<InputWidget> {

  InputValue val = new InputValue(text: "");
  String ersteAbleitung = "";
  String zweiteAbleitung = "";
  String dritteAbleitung = "";
  String roots = "";
  String function = "";

  void _submitted(){
    setState((){
      /*
       * Redirect here
       */
    });
  }

  @override
  Widget build(BuildContext context) {

    return new Column(
        children: [
          new Input(
            value: val,
            labelText: 'Funktion hier eingeben',
            onChanged: (InputValue newInputValue) {
              setState(() {
                val = newInputValue;
              });
          }),
          new IconButton(
            icon: new Icon(Icons.check),
            onPressed: _submitted,
          )
        ]
    );
  }
}

As soon as the user now clicks the IconButton (which calls _submitted), I want him to be redirected to a new View (Widget). How would I solve this routing problem in Flutter?

Thanks in advance

Collin Jackson · Accepted Answer · 2022-10-04T19:59:07.020

8

Normal route navigation might look like this:

new IconButton(
    icon: new Icon(Icons.check),
    onPressed: () {
        Navigator.push(context, new MaterialPageRoute(
            builder: (_) => new MyCustomView(),
        );
    )
)

You can also use named routes by passing a map of WidgetBuilders as the routes constructor argument for your MaterialApp, or by passing an onGenerateRoute handler. There's an example of named routes in the Flutter gallery.

If you don't want there to be an animation, see my answer to this question.

edited Oct 04 '22 at 19:59

answered Apr 28 '17 at 17:28

Collin Jackson

110,240
31
221
152

Thanks, will try it our soon! – OhMad Apr 28 '17 at 18:58
1

Works perfectly. Is there a way to change the duration and direction of the animation? – OhMad Apr 29 '17 at 07:12
Yes. Follow the example I gave in [this question](http://stackoverflow.com/questions/43680902/replace-initial-route-in-materialapp-without-animation/43685697). You can customize the duration with this code: @override Duration get transitionDuration => const Duration(milliseconds: 100); – Collin Jackson Apr 30 '17 at 02:34
1

In the common case where you want it to slide in from the bottom, use the "fullscreenDialog: true" argument to MaterialPageRoute. To slide from other directions, use a customized MaterialPageRoute with SlideTransition. See [MaterialPageRoute](https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/page.dart) for inspiration. – Collin Jackson Apr 30 '17 at 02:40
Thanks for the answers! Got everything working how I wanted it to :) – OhMad Apr 30 '17 at 07:45
the link is dead – Basheer AL-MOMANI Jul 17 '22 at 05:56
I fixed the link to the example – Collin Jackson Oct 04 '22 at 19:59

Flutter - Routing between different Views

1 Answers1