InkWell onTap关于";上下文"

Question

我正在使用下面的这篇文章在flutter中开发一个新闻应用程序。一切都很好，但在最后一步中，我遇到了InkWell的onTap函数的问题，因为"；上下文">

在我下面的代码中，我包围了我的"；上下文"；***的错误只是为了显示。

我将展示总共三个文件。

https://nabendu82.medium.com/flutter-news-app-using-newsapi-2294c2dcf673

主页

import 'package:flutter/material.dart';
import 'package:flutter_job_portal/news/model/article_model.dart';
import 'package:flutter_job_portal/news/services/api_service.dart';
import 'package:flutter_job_portal/news/components/customListTile.dart';
class HomeNews extends StatefulWidget {
@override
_HomeNewsState createState() => _HomeNewsState();
}
class _HomeNewsState extends State<HomeNews> {
ApiService client = ApiService();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("News App", style: TextStyle(color: Colors.black)),
backgroundColor: Colors.white),
body: FutureBuilder(
future: client.getArticle(),
builder: (BuildContext context, AsyncSnapshot<List<Article>> snapshot) {
if (snapshot.hasData) {
List<Article> articles = snapshot.data;
return ListView.builder(
itemCount: articles.length,
itemBuilder: (context, index) =>
customListTile(articles[index], ***context***)
//     ListTile(title: Text(articles[index].title))
// customListTile(
//       articles[index],
//       context
//     )
);
}
return Center(
child: CircularProgressIndicator(),
);
},
),
);
}
}

customListTile

// import 'dart:js';
import 'package:flutter/material.dart';
import 'package:flutter_job_portal/news/model/article_model.dart';
import 'package:flutter_job_portal/news/pages/articles_details_page.dart';
Widget customListTile(Article article) {
return InkWell(
onTap: () {
Navigator.push(
***context***,
MaterialPageRoute(
builder: (context) => ArticlePage(
article: article,
)));
},
child: Container(
margin: EdgeInsets.all(12.0),
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.0),
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 3.0,
),
]),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
article.urlToImage != null
? Container(
height: 200.0,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(article.urlToImage),
fit: BoxFit.cover),
borderRadius: BorderRadius.circular(12.0),
),
)
: Container(
height: 200.0,
width: double.infinity,
child: Image.network('https://picsum.photos/250?image=9'),
),
SizedBox(height: 8.0),
Container(
padding: EdgeInsets.all(6.0),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(30.0),
),
child: Text(
article.source.name,
style: TextStyle(
color: Colors.white,
),
),
),
SizedBox(height: 8.0),
Text(
article.title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
)
],
),
),
);
}

Answer 1

您没有访问BuildContext的权限。快速解决方案，将context传递给customListTile的方法如下：

Widget customListTile(BuildContext context, Article article)

然而，最好的设计实践是创建一个扩展StatelessWidget或StatefulWidget的CustomListTile类，而不是函数。然后，您将可以访问小部件中的BuildContext。