[Flutter] 跳轉畫面 Widget 之間如何傳遞資料參數值？必看超簡單程式碼範例教學

 Flutter 是 Google 跨平台 UI 解決方案，在開發 Flutter App 不可避免的是一頁畫面跳轉到另一個畫面，需要傳遞資料參數，到底要如何傳值呢？本文提供程式碼解說，非常簡單好上手，那麼就繼續看下去吧！

原生 Android 跳轉畫面傳值

我們只需要透過 Intent 物件，從 A Activity 到 B Activity 傳基本參數，然後要從 B Activity 傳回 A Activity 則是讓 A 繼承 onActivityResult 的 method，如果是 Fragment 之間的話則是利用 Bundle 傳值。

 

Flutter 跳轉畫面傳值步驟

1. main 畫面傳給 B 畫面

 

首先開新專案時，我們擁有一個預設 Flutter 畫面。原始頁面程式碼 _MyHomePageState 部分我們調整成以下樣子，以便接下來測試傳送資料參數是否正常。

class _MyHomePageState extends State {
  String text="尚未接收資料";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
                text
            ),
            RaisedButton(onPressed: onPressToNextScreen,child: Text("點我進 B 畫面"),)
          ],
        ),
      ), 
    );
  }
  void onPressToNextScreen(){
   //準備實作跳轉 B 畫面
  }
}

再來新增一個 .dart 檔案名為 b_screen.dart，這個成為我們跳轉目地第二個畫面，而 BScreen 這個 class 接收的參數，也就是範例程式碼的 String value 是由建構子接收。

class BScreen extends StatelessWidget {

  final String value;

  // 接收的參數是由建構子接收在這裡!!
  BScreen({@required this.value});

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(value),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(value),
      ),
    );
  }
}

兩個頁面都建立好了，接下來就是點擊 Button 由 A 跳轉到 B 的實作方法，利用 Navigator.pop 推到下一頁。就能成功傳送資料過去 B 畫面了。

void onPressToNextScreen(){
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => BScreen(value:"我是從 A 傳來的資料!"),
      ),
    );
  }

2. B 畫面回傳資料到 main 畫面

B 畫面新增一個 Button 用來點擊回傳資料參數給 A 畫面，一樣利用 Navigator.pop。

 

RaisedButton(
    onPressed: () {
       Navigator.pop(context, '我是 B 畫面來的資料!');
    },
    child: Text("回傳資料給 A 畫面"),
)

main.dart 則把 onPressToNextScreen 做成 async & await Navigator 的結果，為的是等待資料回傳後更新資料給 text。

void onPressToNextScreen() async{
    final result = await Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => BScreen(value:"我是從 A 傳來的資料!"),
      ),
    );
    //從 B 畫面回傳後更新畫面資料
    setState(() {
      if(result!=null){
        text = result;
      }
    });
  }

這樣就成功把資料傳回 main.dart 了！

Flutter App 結果畫面

完整程式碼

如果喜歡這篇技術文章分享，歡迎到 GitHub 按星星收藏，鼓勵創作。

⇒ GitHub 專案連結

更多 Flutter 學習資源

⇒ Flutter 程式設計入門實戰 30 天

⇒ The Complete 2020 Flutter Development Bootcamp with Dart

相關 Flutter 教學一律會放在 Flutter 標籤分類，歡迎持續追蹤。

⇒ 點我看更多 Flutter 教學