Flutter Pass Data Between Screens/Pages.

| Page Views: 1242

Flutter Data Passing Tutorial and Example.

In this piece we want to see how to pass data from one flutter app page to another. This is a very important concept since many apps do need to pass data between pages. For example once you've logged a user in you may need to pass the username to the dashboard page.

Video Tutorial

Here's the video tutorial.

(a). Demo

Coming soon.

(b). pubspec.yaml

Just specify your app name and description below. We don't need third party libraries.

name: pass_data
description: A new Flutter project.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

(c). main.dart

Here's our full main.dart file.

import 'package:flutter/material.dart';

class User {
  final String username, email, password,imageUrl;

  const User(
    {
    this.username,
    this.email,
    this.password,
    this.imageUrl,
    }
  );
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  //TextEditingController is controller for editable text fields.
  //It's role is to update itself and notify listeners whenever it's associated
  //textfield changes.
  var _usernameController = new TextEditingController();
  var _emailController = new TextEditingController();
  var _passwordController = new TextEditingController();
  var _imageURLController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: new AppBar(
        title: new Text('Data Passing'),
      ),
      body: new Container(
        child: new Center(
          child: Column(
            children: <Widget>[
                Padding(
                  child: new Text(
                    'Type and Pass Data',
                    style: new TextStyle(fontWeight: FontWeight.bold,fontSize: 20.0),
                    textAlign: TextAlign.center,
                    ),
                  padding: EdgeInsets.only(bottom: 20.0),
                ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Username'),
                controller: _usernameController,
              ),
              TextFormField(
                controller: _emailController,
                decoration: InputDecoration(labelText: 'Email'),
              ),
              TextFormField(
                controller: _passwordController,
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
              ),
              new TextFormField(
                controller: _imageURLController,
                decoration: new InputDecoration(labelText: "Image URL"),
              ),
              new RaisedButton(
                onPressed: () {
                  // A MaterialPageRoute is a  modal route that replaces the entire screen
                  // with a platform-adaptive transition.
                  var route = new MaterialPageRoute(
                    builder: (BuildContext context) =>
                        new SecondPage(
                          value: User(
                                  username: _usernameController.text,
                                  email: _emailController.text,
                                  password: _passwordController.text,
                                  imageUrl: _imageURLController.text
                                  )
                                  ),
                  );
                  Navigator.of(context).push(route);
                },
                child: new Text('Click to Pass Data'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class SecondPage extends StatefulWidget {
  final User value;

  SecondPage({Key key, this.value}) : super(key: key);

  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('Second Page')),
      body: new Container(
         child: new Center(
            child: Column(
              children: <Widget>[
                Padding(
                  child: new Text(
                    'PASSED VALUES',
                    style: new TextStyle(fontWeight: FontWeight.bold,fontSize: 20.0),
                    textAlign: TextAlign.center,
                    ),
                  padding: EdgeInsets.only(bottom: 20.0),
                ),
                Padding(
                  //`widget` is the current configuration. A State object's configuration
                  //is the corresponding StatefulWidget instance.
                  child: Image.network( '${widget.value.imageUrl}'),
                  padding: EdgeInsets.only(bottom: 8.0),
                ),
                Padding(
                  child: new Text(
                    'USERNAME : ${widget.value.username}',
                    style: new TextStyle(fontWeight: FontWeight.bold),
                    textAlign: TextAlign.left,
                    ),
                  padding: EdgeInsets.all(10.0),
                ),
                Padding(
                  child: new Text(
                    'PASSWORD : ${widget.value.email}',
                     style: new TextStyle(fontWeight: FontWeight.bold),
                    textAlign: TextAlign.left,
                    ),
                  padding: EdgeInsets.all(10.0),
                ),
                Padding(
                  child: new Text(
                    'PASSWORD : ${widget.value.password}',
                     style: new TextStyle(fontWeight: FontWeight.bold),
                    textAlign: TextAlign.left,
                    ),
                  padding: EdgeInsets.all(10.0),
                )
                 ],   ),
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        body: new Home(),
      ),
    );
  }
}

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

How to Download and Run.

Go ahead and copy this code into your project's main.dart file. There is no setup required or any third party dependency.

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section.

About Me.

After completing his Software Engineering bachelors program, Oclemy(Clement Ochieng) these days is a man of two lives. At day he works for a startup in Nairobi, Kenya. At night he works tirelessly on building ProgrammingWizards TV, a tv channel for student coders and this website to help share the source code. In between he practices Meditation and Self actualization to help him keep balance. He also likes going for long solo walks to connect more with nature.




Recommendations


What do You Think


Previous Post Next Post