将 API 数据从第 1 页传递到 Flutter 上的另一个 dart 页面

Posted 2023-02-23

【中文标题】将 API 数据从第 1 页传递到 Flutter 上的另一个 dart 页面

【英文标题】：passing API data from page 1 to another dart page on flutter

【发布时间】：2021-06-16 12:21:52

【问题描述】：

已经有来自 API 的数据的页面，然后我想将 API 数据发送到下一页。

例子：当我们点击食物列表时，会出现被点击食物的描述或者当我们点击另一个页面的数据时，它比列表上的数据更详细

以下是起始页的代码：

var notifikasiSiswa = [];

//====================== Fungsi ListView ================================
class _NotifikasiSiswaState extends State<NotifikasiSiswa> 
  
  Future<SharedPreferences> _sprefs = SharedPreferences.getInstance();
  int id;


  @override
  Future<Null> getData() async 
    final SharedPreferences prefs = await _sprefs;
    int data = prefs.getInt('id');

    this.setState(() 
      id = data ;
    );
    // counter = data;

    // api coba dsni
    NotifikasiSiswaMo.getPengumuman(id.toString()).then((value) 
      notifikasiSiswa = value;
      this.setState(() 
        notifikasiSiswa = value;
      );

      print("muncul");
    );

    // print(token);
  


  @override
  void initState() 
    super.initState();
    setState(() 
      getData();
    );

  



  @override
  Widget build(BuildContext context) 
    return Scaffold(
        appBar: AppBar(title: Text("Materi Siswa"),),
        body: ListView.builder(   // Auto Scroll Jika Data yang dimunculkan banyak
          reverse: true,
          itemCount: notifikasiSiswa.length,
          itemBuilder: (context, index)
            return Center(
                child: Padding(
                  padding: EdgeInsets.only(left: 20.0, right: 20.0, top: 15.0 ),
                  child: Stack(
                    children: <Widget>[
                      Container(
                          height: 100,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(_borderRadius),
                            gradient: LinearGradient(
                                colors: [Colors.white, Colors.white],
                                begin: Alignment.topLeft,
                                end: Alignment.bottomRight),
                          )
                      ),
                      Positioned.fill(child: InkWell(
                        splashColor: Colors.blue.withAlpha(30),
                        onTap: () 
                          Navigator.push(context, MaterialPageRoute(builder: (context) 
                            return NotifikasiSiswaDetail(
                              s_date : notifikasiSiswa[index].date,
                              s_title : notifikasiSiswa[index].title,
                              s_message :notifikasiSiswa[index].message
                            );
                            ,
                          ));
                        ,
                        child: Row(
                          children: <Widget>[
                            Expanded(
                                child:
                             Center(
                                 child: Icon(Icons.notifications_active))
                            ),
                            Expanded(
                                flex: 4,
                                child: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  crossAxisAlignment: CrossAxisAlignment.start, //Vertical dengan posisi aligmn start
                                  children: <Widget>[
                                    Text(notifikasiSiswa[index].date ?? "00/00/00",
                                      style: TextStyle(
                                          color: Colors.black45,
                                          fontWeight: FontWeight.w500),),
                                    SizedBox(
                                      height: 6.0,
                                    ),

下一页如何？

【参考方案1】：

final List args = ModalRoute.of(context).settings.arguments;如果我正确理解了您的问题，您可以使用Navigator.pushNamed() 中的arguments 参数将数据传递到新页面。

Navigator.pushNamed(context, '/newPage', arguments: /* data you want to pass */);

要从新页面访问这些数据，您可以在其build 方法中使用这一行。

final args = ModalRoute.of(context).settings.arguments;

您可以在此处了解更多信息：https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments

【参考方案2】：

你有（至少）两个选择：

保存状态中的数据。如果数据不是那么大和复杂，你可以通过 state 携带它。 提出新请求。如果您需要更多详细信息而不仅仅是标题和描述，例如 cmets、like、shares 等，那么您最好提出新请求。是的，它在带宽和金钱方面的成本更高，但它为您提供了更多的工作空间。