การรับค่า ส่งค่าจากหน้าที่ 1 ไปหน้าที่ 2 บน Flutter (How to pass data between screens in Flutter?)

สำหรับนักพัฒนาทุกคนคงเคยเจอปัญหากับรายละเอียดการส่งค่าจะหน้าที่ 1 ไปหน้าที่ 2 เพราะเราต้องให้ตัวแอปมีการนำค่าเหล่านี้ไปใช้งานได้ต่อ ไม่ทำการดึงค่ามาใหม่จากที่ต่างๆ ซึ่งทุกระบบสามารถทำได้ครับ และตัวอย่างนี้จะเป็นของ Flutter บ้างจะมีการรับค่าส่งค่ายังไง (How to pass data)

 ListTile(
    leading: CircleAvatar(
        backgroundImage: AssetImage('assets/images/logo.png'),
    ),
    title: Text('A1'),
    subtitle: Text('Floor: 1st, Roof: No'),
    onTap: () => Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => MainPage2(name: "A1")),
    ),
 ),

สำหรับตัวอย่างนี้เราจะใช้ ListTile ในการส่งค่าครับ อันอื่นใช้ Button หรืออะไรก็ได้นะ โดยเราจะกำหนดรูปภาพเป็นวงกลมและใส่ Title , Subtitle จากนั้นใส่ onTap เป็นการบอกว่ากดแล้วให้ทำอะไรต่อ

โดยคำสั่งคือ

 Navigator.push(
   context,
   MaterialPageRoute(builder: (context) => MainPage2(name: "A1")),
 ),

ให้ไปยังคลาส MainPage2 โดยที่เราจะส่งตัวแปรตามไปด้วยนั้นคือ name และค่าคือ A1 จากนั้นเราไปดูที่ MainPage2 กัน

class MainPage2 extends StatefulWidget {
  static Future<void> navigatorPush(BuildContext context) async {
    return Navigator.push<void>(
      context,
      MaterialPageRoute(
        builder: (_) => MainPage2(),
      ),
    );
  }

  var name;
  MainPage2({this.name});

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

รายละเอียดสำคัญในนี้คือ var name; กับ MainPage2({this.name}); เป็นการประกาศตัวแปร

 Text(
    widget.name,
    style: const TextStyle(
        fontSize: 90,
        fontFamily: 'Helvetica',
        fontWeight: FontWeight.bold),
 ),

จากนั้นใน Text ให้กำหนดเป็น widget.name เท่านี้ก็เป็นอันเรียบร้อย เราก็จะได้ค่าที่รับมาจากหน้าแรก

โค้ดหน้าแรก main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      routes: <String, WidgetBuilder>{},
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Main1"),
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            leading: CircleAvatar(
              backgroundImage: AssetImage('assets/images/logo.png'),
            ),
            title: Text('A1'),
            subtitle: Text('Floor: 1st, Roof: No'),
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => MainPage2(name: "A1")),
            ),
          ),
          ListTile(
            leading: CircleAvatar(
              backgroundImage: AssetImage('assets/images/logo.png'),
            ),
            title: Text('A2'),
            subtitle: Text('Floor: 1st, Roof: No'),
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => MainPage2(name: "A2")),
            ),
          ),
          ListTile(
            leading: CircleAvatar(
              backgroundImage: AssetImage('assets/images/logo.png'),
            ),
            title: Text('A3'),
            subtitle: Text('Floor: 1st, Roof: No'),
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => MainPage2(name: "A3")),
            ),
          ),
          ListTile(
            leading: CircleAvatar(
              backgroundImage: AssetImage('assets/images/logo.png'),
            ),
            title: Text('A4'),
            subtitle: Text('Floor: 1st, Roof: No'),
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => MainPage2(name: "A4")),
            ),
          ),
          ListTile(
            leading: CircleAvatar(
              backgroundImage: AssetImage('assets/images/logo.png'),
            ),
            title: Text('A5'),
            subtitle: Text('Floor: 1st, Roof: No'),
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => MainPage2(name: "A5")),
            ),
          ),
          ListTile(
            leading: CircleAvatar(
              backgroundImage: AssetImage('assets/images/logo.png'),
            ),
            title: Text('B1'),
            subtitle: Text('Floor: 1st, Roof: Yes'),
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => MainPage2(name: "B1")),
            ),
          ),
          ListTile(
            leading: CircleAvatar(
              backgroundImage: AssetImage('assets/images/logo.png'),
            ),
            title: Text('B2'),
            subtitle: Text('Floor: 1st, Roof: Yes'),
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => MainPage2(name: "B2")),
            ),
          ),
          ListTile(
            leading: CircleAvatar(
              backgroundImage: AssetImage('assets/images/logo.png'),
            ),
            title: Text('B3'),
            subtitle: Text('Floor: 1st, Roof: Yes'),
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => MainPage2(name: "B3")),
            ),
          ),
          ListTile(
            leading: CircleAvatar(
              backgroundImage: AssetImage('assets/images/logo.png'),
            ),
            title: Text('B4'),
            subtitle: Text('Floor: 1st, Roof: Yes'),
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => MainPage2(name: "B4")),
            ),
          ),
          ListTile(
            leading: CircleAvatar(
              backgroundImage: AssetImage('assets/images/logo.png'),
            ),
            title: Text('B5'),
            subtitle: Text('Floor: 1st, Roof: Yes'),
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => MainPage2(name: "B5")),
            ),
          ),
        ],
      ),
    );
  }
}

โค้ดหน้าสอง main2.dart

import 'package:carparking_project/main.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class MainPage2 extends StatefulWidget {
  static Future<void> navigatorPush(BuildContext context) async {
    return Navigator.push<void>(
      context,
      MaterialPageRoute(
        builder: (_) => MainPage2(),
      ),
    );
  }

  var name;
  MainPage2({this.name});

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

class _State extends State<MainPage2> {
  final _isHours = true;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Main2'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(
              widget.name,
              style: const TextStyle(
                  fontSize: 90,
                  fontFamily: 'Helvetica',
                  fontWeight: FontWeight.bold),
            ),
          ],
        ),
      ),
    );
  }
}