трепещущая чернильница на крышке

#list #flutter #dart

Вопрос:

итак, у меня есть эта страница под названием screen1, она отлично работает и показывает данные

 import 'package:flutter/material.dart'; import 'package:food_app/data/data.dart'; import 'package:food_app/views/home.dart';  class Screen1 extends StatelessWidget {   @override  Widget build(BuildContext context) {  return Scaffold(  appBar: AppBar(  title: Text("japanese recipes"),  backgroundColor: Colors.yellow,  ),  body: Center(  child: Padding(  padding: const EdgeInsets.all(8.0),  child: ListView.builder(  itemCount: data.length,  itemBuilder: (BuildContext context , int index) {  return Card(  child: ListTile(    leading: CircleAvatar(  backgroundColor: Colors.white,  child: Image.asset(data[index]["image"])),  title: Text(data[index]["name"]),  subtitle:Text(data[index]["about"]),  ),  );    }  )  ),  ),  floatingActionButton: FloatingActionButton(  backgroundColor: Colors.yellow,  child: const Icon(Icons.home),  onPressed: () {  Navigator.of(context)  .push(MaterialPageRoute(builder: (context) =gt; HomePage()));  },  ),  );  } }  

и данные моего списка таковы , есть имя и изображение , о

 List data = [  {"name": "Chicken-Zosui","image":"assets/recipeApi/Chicken-Zosui.jpg", "about": "Zosui is a comforting Japanese rice soup that works beautifully with pantry-ready ingredients like ready-cooked rice, eggs, and leftover ingredients. The easy template is flexible, yet you’re guaranteed a nourishing meal at the end of the day."},  {"name": "Miso-Salmon","image":"assets/recipeApi/Miso-Salmon.jpg", "about": "Known for its Omega-3 fatty acid, salmon is a great protein to have in the diet. For that reason alone, I always have frozen salmon fillets in my freezer. This Miso Salmon recipe is really simple to make. You just need to marinate the fish for 30 minutes, you’d get a flavorful fish to serve for dinner. We love it with Japanese ginger rice."},  {"name": "Spam-Onigirazu","image":"assets/recipeApi/Spam-Onigirazu.jpg", "about": "Eggs, ham, sushi rice, and nori sheet. That’s all you need to make this yummy Spam Onigirazu. I used a special mold to create a perfect shape for the rice sandwich, but you really don’t need one."},  {"name": "Sweet-Onion","image":"assets/recipeApi/Sweet-Onion.jpg", "about": "This Japanese Mixed Rice is a one-pot wonder! You can literally cook it with any seasonal ingredients or pantry items you have in the refrigerator. Think dried mushrooms, canned tuna, sweet potatoes, carrots, etc."},  {"name": "Vegan-Miso-Soup","image":"assets/recipeApi/Vegan-Miso-Soup.jpg", "about": " cannot live without miso soup. Luckily, you can make a really good bowl of miso soup with only pantry items like dried kombu, silken tofu, and dried wakame. You can even enjoy it plain! Packed with umami goodness, it’s hands-down the easiest soup anyone can pull off anytime."},  {"name": "Yaki-Onigiri","image":"assets/recipeApi/Yaki-Onigiri.jpg", "about": "Lightly brushed with savory soy sauce, these grilled Japanese rice balls are simply irresistible. It requires only rice, salt, and sweet and soy sauce (or my take, delicious Unagi Sauce! It can be a store-bought or my homemade recipe on the blog). You can make them plain or stuffed them with fun fillings such as canned salmon. They are so easy to make that you want to grill them up at home!"},  {"name": "Yaki-Udon","image":"assets/recipeApi/Yaki-Udon.jpg", "about": "Japanese udon noodles stir-fried with vegetables and your choice of protein, Yaki Udon is definitely a keeper when comes to easy pantry meal."},  ];  

я хочу добавить чернильницу, чтобы каждый раз, когда пользователь нажимает на список имен, он переходил на другую страницу с изображением и текстом об этом

Комментарии:

1. Вы пробовали обернуть свой лист в свой конструктор элементов виджетом чернильницы?

Ответ №1:

Сами ListTile виджеты имеют onTap событие и не требуют InkWell

 return Card(  child: ListTile(  leading: CircleAvatar(  backgroundColor: Colors.white,  child: Image.asset(data[index]["image"])),  title: Text(data[index]["name"]),  subtitle:Text(data[index]["about"]),  ),  onTap: () {  Navigator.push(  context,  MaterialPageRoute(builder: (context) =gt; YourNewPage(name:data[index]["name"],image:data[index]["image"]),),  );  },  );  

Комментарии:

1. я действительно работал, но при неправильном приеме данных чего-то не хватает

Ответ №2:

В ListTile используйте oneTap для перехода на страницу сведений и используйте constractor для передачи ваших данных.

 import 'package:flutter/material.dart';  import 'package:food_app/data/data.dart';  import 'package:food_app/views/home.dart';    class Screen1 extends StatelessWidget {    @override  Widget build(BuildContext context) {  return Scaffold(  appBar: AppBar(  title: Text("japanese recipes"),  backgroundColor: Colors.yellow,  ),  body: Center(  child: Padding(  padding: const EdgeInsets.all(8.0),  child: ListView.builder(  itemCount: data.length,  itemBuilder: (BuildContext context , int index) {  return Card(  child: ListTile(  onTap:(){ Navigator.push(  context,  MaterialPageRoute(builder: (context) =gt; DetailsPage(name:data[index]["name"],image:data[index]["image"]),),  );}   leading: CircleAvatar(  backgroundColor: Colors.white,  child: Image.asset(data[index]["image"])),  title: Text(data[index]["name"]),  subtitle:Text(data[index]["about"]),  ),  );    }  )  ),  ),  floatingActionButton: FloatingActionButton(  backgroundColor: Colors.yellow,  child: const Icon(Icons.home),  onPressed: () {  Navigator.of(context)  .push(MaterialPageRoute(builder: (context) =gt; HomePage()));  },  ),  );  }  }  

Страница с подробными сведениями будет выглядеть так

 import 'package:flutter/material.dart';      class DetailsPage extends StatefulWidget {  String name; String image;    @override  _PatientListState createState() =gt; _PatientListState();  }    class _PatientListState extends Statelt;BloodDonateScreengt; {    @override  Widget build(BuildContext context) {    return Scaffold(  appBar: AppBar(  title: Text("Deatils Page"),    ),  body: SingleChildScrollView(  child: Container(  height: 600,  child: ListView.builder(  itemCount: 10,  itemBuilder: (BuildContext context, index) {  return Container(  width: 300,  height: 260,  padding: new EdgeInsets.all(10.0),  child: Card(    shape: RoundedRectangleBorder(  borderRadius: BorderRadius.circular(15.0),  ),  color: Colors.red,  elevation: 10,  child: Column(  mainAxisSize: MainAxisSize.min,  children: lt;Widgetgt;[  ListTile(  leading: Icon(Icons.bloodtype, size: 40),  title: Text(  widget.name,  style: TextStyle(  fontSize: 20.0,  color: theme.changeColor? Colors.white: Colors.black)  ),        ],  ),    ],  ),  ),  );  },      ),  ),  ),  );  }  );  }  }  

Затем на странице «Подробности» назовите свои данные с помощью widget.name / виджет.изображение

Комментарии:

1. насчет кровавого экрана ?

2. в этом коде в виджете много ошибок