Flutter - 在类的方法和其他类之间共享 Firestore 数据

Question

我在两个不同的类中使用 Firestore 数据时遇到了一些麻烦。

我有 HomePage 类和 FirestoreSliceShow。

在 FirestoreSliceShow 类中，我查询了 firestore，并且可以使用 _buildStoryPage 方法中的数据。但是，我需要在 HomePage 类中使用同一张照片幻灯片的数据。

如何将 slideList[currentIdx - 1] 中的数据与 HomePage 类共享？

主页类：

class HomePage extends StatefulWidget
{

  HomePage
  ({
    this.auth,
    this.onSignedOut,
  });


  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
   }
 }

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin
{
  List<Posts> postsList = [];


    @override
    void initState(){

    // defining the animation, removed to reduce the number of lines

        super.initState();
    }

    onBottomPartTap(){

    }




// Deteils box --- some information from firebase db go to here

  Widget getWidget(){

    return Stack(
      fit: StackFit.expand,
      children: <Widget>[
        FractionallySizedBox(
          alignment: Alignment.topCenter,
          heightFactor: _heightFactorAnimation.value,
          child: FirestoreSlideShow(),
        ),
        GestureDetector(
          onTap: onBottomPartTap,
          onVerticalDragUpdate: _handleVerticalUpdate,
          onVerticalDragEnd: _handleVerticalEnd,
          child: FractionallySizedBox(
            alignment: Alignment.bottomCenter,
            heightFactor: 1.05 - _heightFactorAnimation.value,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                boxShadow: [
                  new BoxShadow(
                    color: Colors.black12,
                  )
                ],
              ),
              child: Row(
                children: <Widget>[

                  Expanded(
                      child: Text(
                          "<---- TAGS HERE ---->", textAlign: TextAlign.center),
                  ),
                  Expanded(
                    child: Text(
                      "<---- PHOTO TITLE HERE ---->", textAlign: TextAlign.center),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );

 }


  @override
  Widget build(BuildContext context) {

    screenHeight = MediaQuery.of(context).size.height;
    return MaterialApp
      (
        home: Scaffold
          (
            backgroundColor: Color(0xFFEEEEEE),
            bottomNavigationBar: AppBottomBar(),
            body: AnimatedBuilder(
              animation: _controller,
              builder: (context, widget){
                return getWidget();
              },
            ),
        ),
       );
    }
}

还有 FirestoreSlideShow 类：

class FirestoreSlideShow extends StatefulWidget{

  createState() => FirestoreSlideshowState();
}

class FirestoreSlideshowState extends State<FirestoreSlideShow> {

  //width of the image
  final PageController ctrl = PageController(viewportFraction: 0.95);

  // the fraction is to the previous and current image overflow

  final Firestore db = Firestore.instance;

  // data from the db
  Stream slides;

  String activeTag = 'favorites';

  //keep track of the current page to avoid unnecessary renders
  int currentPage = 0;

  @override
  void initState() {
    _queryDb();

    //set state when page changes
    ctrl.addListener(() {
      int next = ctrl.page.round();

      if (currentPage != next) {
        setState(() {
          currentPage = next;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
        stream: slides,
        initialData: [],
        builder: (context, AsyncSnapshot snap) {
          List slideList = snap.data.toList();
          return PageView.builder(
              controller: ctrl,
              itemCount: slideList.length + 1,
              itemBuilder: (context, int currentIdx) {
                if (currentIdx == 0) {
                  return _buildTagPage(); // First slide. to be redesigned
                } else if (slideList.length >= currentIdx) {
                  // Active page
                  bool active = currentIdx == currentPage;

                  //ProfileDetails(index: currentPage,);
                  return _buildStoryPage(slideList[currentIdx - 1], active, currentPage);
                }
              }
          );
        }
    );
  }

  // Query the DB 
  Stream _queryDb({String tag = 'favorites' }) {
    // make a query
    Query query = db.collection('stories').where('tags', arrayContains: tag);

    // Map the documents to the date payload
    slides =
        query.snapshots().map((list) => list.documents.map((doc) => doc.data));

    // update the active tag
    setState(() {
      activeTag = tag;
    });
  }


  static _buildStoryPage(Map data, bool active, int currentPage) {
    // Animated properties
    final double blur = active ? 0 : 0;
    final double offset = active ? 0 : 0;
    //height of the image
    final double top = active ? 5 : 5;


    return AnimatedContainer(
      duration: Duration(milliseconds: 500),
      curve: Curves.easeOutQuint,
      margin: EdgeInsets.only(top: top, bottom: 0, right: 3),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5),

          image: DecorationImage(
            fit: BoxFit.cover,
            image: NetworkImage(data['img']),
          ),
          boxShadow: [BoxShadow(color: Colors.black87,
              blurRadius: blur,
              offset: Offset(offset, offset)),
          ]
      ),
      child: Column(
        children: <Widget>[
          Container(
            child: Text(data['title'],
            style: TextStyle(fontSize: 40, color: Colors.white))
        ),
          Container(
            child: Text(currentPage.toString()),
          ),
        ],
      ),

    );
  }
}

Answer 1

你可以试试这个吗？

class FirestoreSlideShow extends StatefulWidget{

  createState() => FirestoreSlideshowState();
}

class FirestoreSlideshowState extends State<FirestoreSlideShow> {

  //width of the image
  final PageController ctrl = PageController(viewportFraction: 0.95);

  // the fraction is to the previous and current image overflow

  final Firestore db = Firestore.instance;

  // data from the db
  Stream slides;

  String activeTag = 'favorites';

  //keep track of the current page to avoid unnecessary renders
  int currentPage = 0;

  @override
  void initState() {
    _queryDb();

    //set state when page changes
    ctrl.addListener(() {
      int next = ctrl.page.round();

      if (currentPage != next) {
        setState(() {
          currentPage = next;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {

    Widget _buildStoryPage(Map data, bool active, int currentPage) {
        // Animated properties
        final double blur = active ? 0 : 0;
        final double offset = active ? 0 : 0;
        //height of the image
        final double top = active ? 5 : 5;


        return AnimatedContainer(
        duration: Duration(milliseconds: 500),
        curve: Curves.easeOutQuint,
        margin: EdgeInsets.only(top: top, bottom: 0, right: 3),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(5),

            image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(data['img']),
            ),
            boxShadow: [BoxShadow(color: Colors.black87,
                blurRadius: blur,
                offset: Offset(offset, offset)),
            ]
        ),
        child: Column(
            children: <Widget>[
            Container(
                child: Text(data['title'],
                style: TextStyle(fontSize: 40, color: Colors.white))
            ),
            Container(
                child: Text(currentPage.toString()),
            ),
            ],
        ),

        );
    }

    return StreamBuilder(
        stream: slides,
        initialData: [],
        builder: (context, AsyncSnapshot snap) {
          List slideList = snap.data.toList();
          return PageView.builder(
              controller: ctrl,
              itemCount: slideList.length + 1,
              itemBuilder: (context, int currentIdx) {
                if (currentIdx == 0) {
                  return _buildTagPage(); // First slide. to be redesigned
                } else if (slideList.length >= currentIdx) {
                  // Active page
                  bool active = currentIdx == currentPage;

                  //ProfileDetails(index: currentPage,);
                  return _buildStoryPage(slideList[currentIdx - 1], active, currentPage);
                }
              }
          );
        }
    );
  }

  // Query the DB 
  Stream _queryDb({String tag = 'favorites' }) {
    // make a query
    Query query = db.collection('stories').where('tags', arrayContains: tag);

    // Map the documents to the date payload
    slides =
        query.snapshots().map((list) => list.documents.map((doc) => doc.data));

    // update the active tag
    setState(() {
      activeTag = tag;
    });
  }
}