Flutter：使用 MaterialPageRoute 从无状态小部件到有状态小部件

Question

I have a Detail Page as a StatelessWidget . I have a listview in my Feed.dart. With click on an Listview Element to you get to the Detail Page. Now I want to convert the Detail Stateless in a Stateful, but in my feed MaterialPageRoute is now the Error, that the named Parameter shop is not defined. How do i fix the Error?

Detail as Stateless

    class Detail extends StatelessWidget {

  final Shop shop;
  Detail({ this.shop });

  var top = 0.0;

  int segmentedControlGroupValue = 0;
  final Map<int, Widget> myTabs = const <int, Widget>{
    0: Text("Item 1"),
    1: Text("Item 2")
  };

my Detail as a Stateful Widget

class Detail extends StatefulWidget {
   @override
  _DetailState createState() => _DetailState(Shop());
}


class _DetailState extends State<Detail> {

  final Shop shop;
  _DetailState(this.shop);


  var top = 0.0;

and my feed

class ShopTile extends StatelessWidget {

  final Shop shop;
  ShopTile({ this.shop });

 @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(bottom: 16),
      child: InkWell(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => Detail(shop: shop)),
        );
      },

It says the first shop is no longer defined in detail. Therefore there is an error. When it was a stateless widget, it all still worked. Can you please help me where the error is?

Answer 1

You should put the constructor in Detail class not in _DetailState :

class Detail extends StatefulWidget {
  final Shop shop;
  Detail({ this.shop });

   @override
  _DetailState createState() => _DetailState(Shop());
}


class _DetailState extends State<Detail> {

  var top = 0.0;
  Shop shopValue; 

  @override
  void initState() {
    super.initState();
    // access the property 'shop' using 'widget.shop' 
    shopValue = widget.shop
  }
}

Answer 2

Ashok's solution is right. On your feed needs onTap needs to be changed

onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => Detail(shop: widget[index])),
    );
  },