[又重學flutter]控制context與navigator - 2

 

簡單的換頁

// main.dart
import 'package:flutter/material.dart';
import 'a_page.dart';

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

//a_page.dart
import 'package:flutter/material.dart';
import 'b_page.dart';

class APage extends StatefulWidget {
  const APage({Key? key}) : super(key: key);

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

class _APageState extends State<APage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('A頁'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('去B頁'),
          onPressed: () {
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => BPage()));
          },
        ),
      ),
    );
  }
}

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

class BPage extends StatefulWidget {
  const BPage({Key? key}) : super(key: key);

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

class _BPageState extends State<BPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('B頁'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('去上一頁'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

呈現結果: https://github.com/fenturechance/flutterPractice2021/tree/9f01620933c8ca48058b51368054915075561fd7

換頁同時傳資料

//main.dart
import 'package:flutter/material.dart';
import 'a_page.dart';


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

//a_page.dart
import 'package:flutter/material.dart';
import 'b_page.dart';

class APage extends StatefulWidget {
  const APage({Key? key}) : super(key: key);

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

class _APageState extends State<APage> {
  TextEditingController controller = TextEditingController();
  String? textFromB = '';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('A頁'),
      ),
      body: Center(
          child: Column(
        children: [
          Row(
            children: [
              Text('傳資料去B頁'),
              Expanded(
                child: TextField(
                  controller: controller,
                ),
              )
            ],
          ),
          ElevatedButton(
            child: Text('去B頁'),
            onPressed: () {
              gotoBPage(context);
            },
          ),
          Text('從B頁傳來的資料:$textFromB')
        ],
      )),
    );
  }

  void gotoBPage(BuildContext context) async {
    String? newText;
    newText = await Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => BPage(
                  textInput: controller.text,
                )));
    setState(() {
      textFromB = newText;
    });
  }
}

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

class BPage extends StatefulWidget {
  final String? textInput;
  const BPage({Key? key, this.textInput}) : super(key: key);

  @override
  _BPageState createState() => _BPageState(textInput: textInput);
}

class _BPageState extends State<BPage> {
  final String? textInput;
  TextEditingController controller = TextEditingController();
  _BPageState({this.textInput});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('B頁'),
      ),
      body: Center(
          child: Column(
        children: [
          Text('從A頁傳來的資料: $textInput'),
          Row(
            children: [
              Text('傳資料去A頁'),
              Expanded(
                child: TextField(
                  controller: controller,
                ),
              )
            ],
          ),
          ElevatedButton(
            child: Text('去上一頁'),
            onPressed: () {
              Navigator.pop(context, controller.text);
            },
          ),
        ],
      )),
    );
  }
}

呈現效果：https://github.com/fenturechance/flutterPractice2021/tree/eb30fadba13d8e54714474d02832a217ad188997