时间戳

首页 > 解决方案 > 将 API 数据从第 1 页传递到 Flutter 上的另一个 dart 页面

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

问题描述

已经有来自 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,
                                    ),

如何在下一页？

标签： databaseapiflutterdartmobile

解决方案

final List args = ModalRoute.of(context).settings.arguments;如果我正确理解了您的问题，您可以arguments使用Navigator.pushNamed().

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

推荐阅读