微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Flutter:如何将 Cards UI 或 View 转换为个人视图请找到 HomeScreen Page 代码并尝试转换为详细的个人视图

如何解决Flutter:如何将 Cards UI 或 View 转换为个人视图请找到 HomeScreen Page 代码并尝试转换为详细的个人视图

Flutter:How to convert Cards UI or View to Individual View Please find the HomeScreen Page code and try to convert to detailed individual view

                                            import 'dart:async';

import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_database/firebase_database.dart';
import 'package:Flutter/material.dart';

import 'package:gadjet_inventory/Form/ListTiles.dart';
import 'package:gadjet_inventory/main.dart';
import 'package:intl/intl.dart';
import 'package:gadjet_inventory/Form/Data.dart';

import 'UploadData.dart';

import 'package:pdf_Flutter/pdf_Flutter.dart';
// ignore: must_be_immutable




class HomeScreen extends StatefulWidget {

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

class _HomeScreenState extends State<HomeScreen> {




  List<Data> dataList = [];
  List<bool> favList = [];
  bool searchState = false;
  FirebaseAuth auth = FirebaseAuth.instance;

 



  @override
  void initState() {
    // Todo: implement initState
    super.initState();

    DatabaseReference referenceData = FirebaseDatabase.instance.reference().child("Data");
    referenceData.once().then((DataSnapshot dataSnapShot) {
      dataList.clear();
      favList.clear();

      var keys = dataSnapShot.value.keys;
      var values = dataSnapShot.value;

      for (var key in keys) {

        Data data = new Data(
            values [key]['imgurl'],values [key]['wcpdfUrl'],values [key]['ugpdfUrl'],values [key]['cattegorrytype'],values [key]['companyname'],values [key]['modelname'],values [key]['seriesname'],values [key]['year'],key
          //key is the uploadid
        );
        dataList.add(data);
        auth.currentUser().then((value) {
          DatabaseReference reference = FirebaseDatabase.instance.reference().child("Data").child(key).child("Fav")
              .child(value.uid).child("state");
          reference.once().then((DataSnapshot snapShot){
            if(snapShot.value!=null){
              if(snapShot.value=="true"){
                favList.add(true);
              }else{
                favList.add(false);
              }
            }else{
              favList.add(false);
            }
          });
        });

      }


      Timer(Duration(seconds: 1),(){
        setState(() {
          //
        });
      });


    });


  }

  int selectedRadioTile;

  String get path => null;

  String get title => null;

  setSelectedRadioTile(int val) {
    setState(() {
      selectedRadioTile = val;
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.lightGreen,//Color(0xffffffff),appBar: AppBar(
        centerTitle: true,backgroundColor: Colors.blue,title: new Text("Device Details",style:
        TextStyle(fontSize: 20),textAlign: TextAlign.center),actions: <Widget>[
          IconButton(icon: Icon(Icons.refresh,size: 36,color: Colors.white,),onpressed: () {
              //debugPrint("Add New Device Cattegorry");
              Navigator.push(context,MaterialPageRoute(builder: (context) {
                return ListTiles();
              }
              )
              ); //
            },IconButton(icon: Icon(Icons.home,MaterialPageRoute(builder: (context) {
                return MyHomePage();
              }
              )
              ); //
            },)
        ],body: dataList.length == 0
          ? Center(
          child: Text("No Data Available",style: TextStyle(fontSize: 30),))
          : ListView.builder(
          itemCount: dataList.length,itemBuilder: (_,index) {
            return CardUI(dataList[index].imgurl,dataList[index].wcpdfUrl,dataList[index].cattegorrytype,dataList[index].companyname,dataList[index].modelname,dataList[index].seriesname,dataList[index].year,dataList[index].uploadid,index);
          }
      ),);
  }



  Widget CardUI(String imgurl,String wcpdfUrl,String cattegorrytype,String companyname,String modelname,String seriesname,String year,String uploadId,int index) {
    return Card(
      elevation: 7,margin: EdgeInsets.all(15),//color: Color(0xffff2fc3),color:Colors.blueGrey,child: Container(
        color: Colors.white,margin: EdgeInsets.all(1.5),padding: EdgeInsets.all(10),child: Column(
          children: <Widget>[
            Image.network(
              imgurl != null
                  ? imgurl
                  : '',width: 500,height: 500,Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: <Widget>[
                Expanded(
                  flex: 1,child: Padding(
                    padding: const EdgeInsets.all(8.0),child: Text(  "Cattegorry Type:- "
                             "$cattegorrytype",style: TextStyle(color: Colors.black),],child: Theme(
                      data: ThemeData(
                        hintColor: Colors.blue,child: Text(  "Company Name:- "
                        "$companyname",Expanded(
                  flex: 1,child: Text(  "Model Name:- "
                          "$modelname",child: Text(  "Series Name:- "
                          "$seriesname",child: Text(  "Year Of MFG:- "
                          "$year",RaisedButton(


              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10),color: Colors.blue,child: Text("Warranty Card",style: TextStyle(fontSize: 18,color: Colors.white),RadioListTile(
              value: 1,groupValue: selectedRadioTile,title: Text("PDF"),//subtitle: Text("Upload PDF File"),/*  onChanged: (val) {
                        filePicker(context);
                      },*/
              activeColor: Colors.red,Padding(padding: EdgeInsets.only(top: 15)),//  _buildPDF1Field(context),PDF.network(
              wcpdfUrl != null
                  ? wcpdfUrl
                  : '',width: 600,height: 1000,placeHolder: Image.asset("assets/images/pdf.png",height: 600,width: 500),SizedBox(height: 24),);
  }

我已将几个文本项目(一个 imageUrl 和一个 pdf 文档)上传到 Firebase 存储,并且能够在主屏幕视图(卡片 UI 或视图(卡片列表)和列表平铺视图(带有一张图像和一个文本,点击时)中检索它们它应该显示每个单独的视图)。

请指导我如何转换为个人检索页面而不是一组垂直卡片列表。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。