Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter - Routing between different Views

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

like image 622
OhMad Avatar asked Apr 28 '17 14:04

OhMad


People also ask

How do you navigate between routes in Flutter?

The next few sections show how to navigate between two routes, using these steps: Create two routes. Navigate to the second route using Navigator.push(). Return to the first route using Navigator.pop().

How do I navigate half screen in Flutter?

You can use the Navigator widget to provide any number of individual navigators in your app. Each Navigator will maintain it's own navigation stack. For example, if you wanted to split your app vertically with each half having it's own navigation stack: Column( children: <Widget>[ Navigator(...), Navigator(...) ] )


1 Answers

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.

like image 66
Collin Jackson Avatar answered Oct 12 '22 14:10

Collin Jackson