错误：在此小部件 Flutter [PropertiesGrid] 上方找不到正确的提供程序

Question

I am trying to call a simple GridWiget inside my home page

and this is MyHomePage StatefulWidget :

import './app_theme.dart';
import 'package:flutter/material.dart';
import './widgets/properties_grid.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  var _showOnlyFavorites = false;
  AnimationController animationController;
  bool multiple = true;

  @override
  void initState() {
    animationController = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    super.initState();
  }

  Future<bool> getData() async {
    await Future<dynamic>.delayed(const Duration(milliseconds: 0));
    return true;
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppTheme.white,
      body: FutureBuilder<bool>(
        future: getData(),
        builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
          if (!snapshot.hasData) {
            return const SizedBox();
          } else {
            return Padding(
              padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  appBar(),
                  Expanded(
                    child: FutureBuilder<bool>(
                      future: getData(),
                      builder:
                          (BuildContext context, AsyncSnapshot<bool> snapshot) {
                        if (!snapshot.hasData) {
                          return const SizedBox();
                        } else {
                          return PropertiesGrid(_showOnlyFavorites);
                        }
                      },
                    ),
                  ),
                ],
              ),
            );
          }
        },
      ),
    );
  }

  Widget appBar() {
    return SizedBox(
      height: AppBar().preferredSize.height,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(top: 8, left: 8),
            child: Container(
              width: AppBar().preferredSize.height - 8,
              height: AppBar().preferredSize.height - 8,
            ),
          ),
          Expanded(
            child: Center(
              child: Padding(
                padding: const EdgeInsets.only(top: 4),
                child:
                    Image.asset('assets/images/logo.png', fit: BoxFit.contain),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 8, right: 8),
            child: Container(
              width: AppBar().preferredSize.height - 8,
              height: AppBar().preferredSize.height - 8,
              color: Colors.white,
              child: Material(
                color: Colors.transparent,
                child: InkWell(
                  borderRadius:
                      BorderRadius.circular(AppBar().preferredSize.height),
                  child: Icon(
                    multiple ? Icons.dashboard : Icons.view_agenda,
                    color: AppTheme.dark_grey,
                  ),
                  onTap: () {
                    setState(() {
                      multiple = !multiple;
                    });
                  },
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

and this is PropertiesGrid StatelessWidget :

import 'package:aradi_online_vtwo/providers/properties.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../providers/properties.dart';
import './property_item.dart';

class PropertiesGrid extends StatelessWidget {
  final bool showFavs;

  PropertiesGrid(this.showFavs);

  @override
  Widget build(BuildContext context) {
    final productsData = Provider.of<Properties>(context);
    final products = showFavs ? productsData.favoriteItems : productsData.items;
    return GridView.builder(
      padding: const EdgeInsets.all(10.0),
      itemCount: products.length,
      itemBuilder: (ctx, i) => ChangeNotifierProvider.value(
            value: products[i],
            child: PropertyItem(
                ),
          ),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 1,
        childAspectRatio: 3 / 2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
      ),
    );
  }
}

and the dummy provider data is something looks like this below one:

import 'package:flutter/material.dart';
import './property.dart';

class Properties with ChangeNotifier {
  List<Property> _items = [
    Property(
      id: 'p1',
      purpose: '',
      title: 'House Title sdfsdffdgdfgdfs',
    ),
    Property(
      id: 'p3',
      purpose: '',
      title: 'land title',
    ),
  ];

  List<Property> get items {
    return [..._items];
  }

  List<Property> get favoriteItems {
    return _items.where((propItem) => propItem.isFavorite).toList();
  }

  Property findById(String id) {
    return _items.firstWhere((prop) => prop.id == id);
  }

  void addProperty(Property property) {
    final newProperty = Property(
      id: DateTime.now().toString(),
      purpose: property.purpose,
      title: property.title,
    );
    _items.add(newProperty);
    notifyListeners();
  }

  void updateProperty(String id, Property newProperty) {
    final propIndex = _items.lastIndexWhere((prop) => prop.id == id);
    if (propIndex >= 0) {
      _items[propIndex] = newProperty;
      notifyListeners();
    } else {
      print('...');
    }
  }

  void deleteProperty(String id) {
    _items.removeWhere((prop) => prop.id == id);
    notifyListeners();
  }
}

and the GridItem is the below code:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../providers/property.dart';

class PropertyItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final property = Provider.of<Property>(context, listen: false);
    // final cart = Provider.of<Cart>(context, listen: false);
    return InkWell(
      onTap: () => {},
      child: Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15),
        ),
        elevation: 7,
        margin: EdgeInsets.all(2),
        child: Stack(
          children: <Widget>[
            ClipRRect(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(15),
                topRight: Radius.circular(15),
              ),
              // color: Colors.transparent,
              child: Image.asset(
                property.image,
                fit: BoxFit.fill,
              ),
            ),
            Positioned(
              top: 8,
              right: 8,
              child: Consumer<Property>(
                builder: (ctx, property, _) => IconButton(
                  icon: Icon(
                    property.isFavorite ? Icons.favorite : Icons.favorite_border,
                  ),
                  color: Colors.red,
                  onPressed: () {
                    property.toggleFavoriteStatus();
                  },
                ),
              ),
            ),
            Positioned(
                  right: 20,
                  top: 100,
                  child: Container(
                    width: 300,
                    color: Colors.black54,
                    padding: EdgeInsets.symmetric(
                      vertical: 5,
                      horizontal: 20,
                    ),
                    child: Text(
                      property.title,
                      style: TextStyle(
                        fontSize: 20,
                        color: Colors.white,
                      ),
                      softWrap: true,
                      overflow: TextOverflow.fade,
                    ),
                  ),
                )
          ],
        ),
      ),
    );
  }
}

and this is the ModelProvider :

import 'package:flutter/foundation.dart';

class Property with ChangeNotifier {
  final String id;
  final String purpose;
  final String title;
  bool isFavorite;

  Property({
    @required this.id,
    @required this.purpose,
    @required this.title,
  });

  void toggleFavoriteStatus() {
    isFavorite = !isFavorite;
    notifyListeners();
  }
}

As the error in this part:

return PropertiesGrid(_showOnlyFavorites);

I hope some one could help I post all Information could be...

Answer 1

You have to add a change notifier provider as a parent in order to access the property model from descendent widgets.

ChangeNotifierProvider(
  create: (context) => Property(),
  child: PropertiesGrid(_showOnlyFavorites),
),

Now you can access the property change notifier model using Provider.of<Property>(context, listen: false); or using Consumer .