带有可点击卡片 back4app 的 Flutter Future Builder

Posted

技术标签:

【中文标题】带有可点击卡片 back4app 的 Flutter Future Builder【英文标题】:flutter future builder with clickable cards back4app 【发布时间】:2021-11-20 02:49:30 【问题描述】:
    import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:image_picker_widget/image_picker_widget.dart';
import 'package:image_picker_widget/enum/image_picker_widget_shape.dart';
import 'package:mall_daur/Catalog/Catalog.dart';
import 'package:mall_daur/Shop/ShopPage.dart';
import 'package:mall_daur/Usaha/UsahaPage.dart';
import 'package:mall_daur/functions/Maps.dart';
import 'package:mall_daur/functions/globalParse.dart';
import 'package:mall_daur/models/Notifications.dart';
import 'package:mall_daur/ordering/OrderPage2.dart';
import 'package:mall_daur/ordering/PickUpOrderInd.dart';
import 'package:persistent_bottom_nav_bar/persistent-tab-view.dart';
import 'dart:async';
import 'package:parse_server_sdk/parse_server_sdk.dart';

class Home2 extends StatefulWidget 
  @override
  _Home2State createState() => _Home2State();


class _Home2State extends State<Home2> 
  String _nama;
  var _pts;
  String _Tempo;
  var _Tempo2;
  List<ParseObject> results = <ParseObject>[];

  @override
  Widget build(BuildContext context) 
    Timer.run(() async 
      _Tempo = await UserAccess().namaLengkap();
      setState(() 
        _nama = _Tempo;
      );
    );
    // Timer.run(() async 
    //   _Tempo2 = await UserAccess().Point();
    //   setState(() 
    //     _pts = _Tempo2;
    //   );
    // );
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Daur.id'),
          titleTextStyle: TextStyle(
            fontSize: 48.0,
            fontWeight: FontWeight.bold
          ),
          centerTitle: true,
          shadowColor: Colors.black,
          backgroundColor: CupertinoColors.activeBlue,
          elevation: 5.0,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
              bottom: Radius.circular(20),
            ),
          ),
          actions: [
            IconButton(icon: Icon(CupertinoIcons.bell_fill, color: Colors.black,), onPressed: ()
              pushNewScreen(
                context,
                screen: Notifikasi(),
                withNavBar: false,
                pageTransitionAnimation: PageTransitionAnimation.cupertino,
              );
            )
          ],
        ),
        body: Stack(
          children: [
            Container(
              decoration: BoxDecoration(
                  color: Colors.white
              ),
            ),
            SingleChildScrollView(
              child: Container(
                padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 40.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Align(alignment: Alignment.centerLeft,child: Text('Hai, $_nama',textAlign: TextAlign.start,style: TextStyle(fontSize: 24.0,fontWeight: FontWeight.bold))),
                            SizedBox(height: 5.0,),
                            Text('Mari kita bersihkan sampah dari lingkungan',style: TextStyle(fontSize: 14.0),)
                          ],
                        ),
                        SizedBox(width: 30.0,),
                        ImagePickerWidget(
                          diameter: 60,
                          initialImage: "https://daur.id/daurid.png" ,
                          shape: ImagePickerWidgetShape.circle,
                          isEditable: false,
                        ),
                      ],
                    ),
                    SizedBox(height: 20.0,),
                    Center(
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20.0),
                          color: Colors.blueAccent,
                          boxShadow: [BoxShadow(
                              color: Colors.black,
                              blurRadius: 10.0,
                              offset: Offset(0, 2)
                          )],),
                        height: 300.0,
                        width: 350.0,
                        child: Scaffold(
                          appBar: AppBar(
                            title: Text('Order Individu'),
                          ),
                          body: SingleChildScrollView(
                            child: FutureBuilder<List<ParseObject>>(
                              future: getCardList(),
                                builder: (context, snapshot) 
                                  switch (snapshot.connectionState) 
                                    case ConnectionState.none:
                                    case ConnectionState.waiting:
                                      return Center(
                                        child: Container(
                                            width: 100,
                                            height: 100,
                                            child: CircularProgressIndicator()),
                                      );
                                    default:
                                      if (snapshot.hasError) 
                                        return Center(
                                          child: Text("Error..."),
                                        );
                                      
                                      else 
                                        ListView.builder(
                                            itemCount: results.length,
                                            itemBuilder: (context,index)
                                              // String varname =
                                              //     snapshot.data[index].get<String>('NamaPemesan');
                                              return Card(
                                                child: ListTile(
                                                  onTap: (),
                                                  title: Text(results[index].toString()),
                                                ),
                                              );
                                            );
                                      
                                  
                                
                            ),
                          ),
                        ),
                      ),
                    ),
                    // Box Iklan
                    SizedBox(height: 30.0),
                    Container(
                      height: 100.0,
                      width: 100.0,
                      color: Colors.blue,
                      child: Text('iklan marzano dll'),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );

  
  Future<void> DetailAlert(BuildContext context) async 
    return showDialog(
        context: context,
        builder: (context) 
          return AlertDialog(
            title: Text('Informasi Pemesan', style: TextStyle(fontWeight: FontWeight.bold,fontSize: 20.0)),
            content: Container(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('Informasi Penjemputan', style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18.0),),
                  Divider(color: Colors.black,),
                  Text('Tanggal Penjemputan '),
                  Text('Alamat Penjemputan '),
                  SizedBox(height: 20.0,),
                  Text('Informasi Sampah', style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18.0),),
                  Divider(color: Colors.black,),
                ],
              ),
            ),
            actions: <Widget>[
              ElevatedButton(
                child: Text('Ubah Ulang'),
                onPressed: () 
                  setState(() 
                    Navigator.pop(context);
                  );
                ,
              ),
              ElevatedButton(
                child: Text('Order Pick Up'),
                onPressed: (),
              ),
            ],
          );
        );

  Future<List<ParseObject>> getCardList() async 
    // final QueryBuilder<ParseObject> parseQuery =
    // QueryBuilder<ParseObject>(ParseObject('OrderIndividu'));
    //
    // final ParseResponse apiResponse = await parseQuery.query();
    //
    // if (apiResponse.success && apiResponse.results != null) 
    //   // Let's show the results
    //   for (var o in apiResponse.results) 
    //     print((o as ParseObject).toString());
    //   
    //
    //   setState(() 
    //     results = apiResponse.results as List<ParseObject>;
    //   );
    //  else 
    //   results = [];
    // 
    // QueryBuilder<ParseObject> queryPublisher =
    // QueryBuilder<ParseObject>(ParseObject('OrderIndividu'));
    // final ParseResponse apiResponse = await queryPublisher.query();
    //
    // if (apiResponse.success && apiResponse.results != null) 
    //   return apiResponse.results as List<ParseObject>;
    //  else 
    //   return [];
    // 
  

所以这是我的完整代码,我正在尝试在这张循环加载的图片中实现某种可点击的卡片。

所以任何人都可以提供示例代码来实现这一点?让卡片出现在这些通告上,因为我确实尝试在未来构建并获取所有对象..出于某种原因,我什至无法将其上传到屏幕上

注意: 我在未来的构建器getCardList()上给出//,因为它一直在调用解析(无论如何这都很好,因为我构建了实时加载对象)但是如果有人可以帮助我停止调用响应。请帮忙

【问题讨论】:

【参考方案1】:

initState 上调用您的 API。还有你的Timer.run

试试这个

class Home2 extends StatefulWidget 
  @override
  _Home2State createState() => _Home2State();


class _Home2State extends State<Home2> 
  String _nama;
  var _pts;
  String _Tempo;
  var _Tempo2;
  List<ParseObject> results = <ParseObject>[];

  @override
  void initState() 
    super.initState();
    Timer.run(() async 
      _Tempo = await UserAccess().namaLengkap();
      setState(() 
        _nama = _Tempo;
      );
    );
    getCardList().then((value) 
      setState(() 
        results = value;
      );
    ).catchError((e) 
      // handle error
    );
  

  @override
  Widget build(BuildContext context) 
    // Timer.run(() async 
    //   _Tempo2 = await UserAccess().Point();
    //   setState(() 
    //     _pts = _Tempo2;
    //   );
    // );
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Daur.id'),
          titleTextStyle: TextStyle(fontSize: 48.0, fontWeight: FontWeight.bold),
          centerTitle: true,
          shadowColor: Colors.black,
          backgroundColor: CupertinoColors.activeBlue,
          elevation: 5.0,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
              bottom: Radius.circular(20),
            ),
          ),
          actions: [
            IconButton(
                icon: Icon(
                  CupertinoIcons.bell_fill,
                  color: Colors.black,
                ),
                onPressed: () 
                  pushNewScreen(
                    context,
                    screen: Notifikasi(),
                    withNavBar: false,
                    pageTransitionAnimation: PageTransitionAnimation.cupertino,
                  );
                )
          ],
        ),
        body: Stack(
          children: [
            Container(
              decoration: BoxDecoration(color: Colors.white),
            ),
            SingleChildScrollView(
              child: Container(
                padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 40.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Align(
                                alignment: Alignment.centerLeft,
                                child: Text('Hai, $_nama',
                                    textAlign: TextAlign.start, style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold))),
                            SizedBox(
                              height: 5.0,
                            ),
                            Text(
                              'Mari kita bersihkan sampah dari lingkungan',
                              style: TextStyle(fontSize: 14.0),
                            )
                          ],
                        ),
                        SizedBox(
                          width: 30.0,
                        ),
                        ImagePickerWidget(
                          diameter: 60,
                          initialImage: "https://daur.id/daurid.png",
                          shape: ImagePickerWidgetShape.circle,
                          isEditable: false,
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 20.0,
                    ),
                    Center(
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20.0),
                          color: Colors.blueAccent,
                          boxShadow: [BoxShadow(color: Colors.black, blurRadius: 10.0, offset: Offset(0, 2))],
                        ),
                        height: 300.0,
                        width: 350.0,
                        child: Scaffold(
                          appBar: AppBar(
                            title: Text('Order Individu'),
                          ),
                          body: SingleChildScrollView(
                              child: results.length == 0
                                  ? CircularProgressIndicator()
                                  : ListView.builder(
                                      itemCount: results.length,
                                      itemBuilder: (context, index) 
                                        // String varname =
                                        //     snapshot.data[index].get<String>('NamaPemesan');
                                        return Card(
                                          child: ListTile(
                                            onTap: () ,
                                            title: Text(results[index].toString()),
                                          ),
                                        );
                                      )),
                        ),
                      ),
                    ),
                    // Box Iklan
                    SizedBox(height: 30.0),
                    Container(
                      height: 100.0,
                      width: 100.0,
                      color: Colors.blue,
                      child: Text('iklan marzano dll'),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  

  Future<void> DetailAlert(BuildContext context) async 
    return showDialog(
        context: context,
        builder: (context) 
          return AlertDialog(
            title: Text('Informasi Pemesan', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0)),
            content: Container(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Informasi Penjemputan',
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0),
                  ),
                  Divider(
                    color: Colors.black,
                  ),
                  Text('Tanggal Penjemputan '),
                  Text('Alamat Penjemputan '),
                  SizedBox(
                    height: 20.0,
                  ),
                  Text(
                    'Informasi Sampah',
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0),
                  ),
                  Divider(
                    color: Colors.black,
                  ),
                ],
              ),
            ),
            actions: <Widget>[
              ElevatedButton(
                child: Text('Ubah Ulang'),
                onPressed: () 
                  setState(() 
                    Navigator.pop(context);
                  );
                ,
              ),
              ElevatedButton(
                child: Text('Order Pick Up'),
                onPressed: () ,
              ),
            ],
          );
        );
  

  Future<List<ParseObject>> getCardList() async 
    // final QueryBuilder<ParseObject> parseQuery =
    // QueryBuilder<ParseObject>(ParseObject('OrderIndividu'));
    //
    // final ParseResponse apiResponse = await parseQuery.query();
    //
    // if (apiResponse.success && apiResponse.results != null) 
    //   // Let's show the results
    //   for (var o in apiResponse.results) 
    //     print((o as ParseObject).toString());
    //   
    //
    //   setState(() 
    //     results = apiResponse.results as List<ParseObject>;
    //   );
    //  else 
    //   results = [];
    // 
    // QueryBuilder<ParseObject> queryPublisher =
    // QueryBuilder<ParseObject>(ParseObject('OrderIndividu'));
    // final ParseResponse apiResponse = await queryPublisher.query();
    //
    // if (apiResponse.success && apiResponse.results != null) 
    //   return apiResponse.results as List<ParseObject>;
    //  else 
    //   return [];
    // 
  

【讨论】:

以上是关于带有可点击卡片 back4app 的 Flutter Future Builder的主要内容,如果未能解决你的问题,请参考以下文章

带有折叠状态图标的 Bootstrap 4 可折叠卡片

Flutter:如何让卡片可点击?

在 Reactstrap 中使整张卡片可点击

markdown 卡片链接可点击

带有卡片堆栈的 Android 垂直视图寻呼机

如何使用 React JS 在 Material UI 中使整个 Card 组件可点击?