InkWell onTap issue regarding "context" - flutter

Question

I am developing a news application in flutter using this article below. Everything works fine but in the last step I run into an issue with InkWell's onTap function because of "context."
Inside my code below I surrounded my "context" error with *** *** just for show.
I am going to show three total files.
https://nabendu82.medium.com/flutter-news-app-using-newsapi-2294c2dcf673
HomePage
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

You do not have access to a BuildContext. The quick solution, pass context to the customListTile method like so:
Widget customListTile(BuildContext context, Article article)
However, the best design practice would be to make a CustomListTile class that extends a StatelessWidget or a StatefulWidget rather than a function. Then you will have access to the BuildContext within the widget.