Make favorite function button on flutter app - flutter

Question

I am Flutter beginner. I'm trying to make News Feeder App.
I would like to Favorite Function Button on each List on my App.
But I don't know how to make it.
I tried to show favorite icons on each list. But It doesn't work.
I would like to select favorite button multiply.
Could you help it?
Here is the codes.
This code is that to show the news title and thumbnail as list.
I would like to put favorite Icon and work "active and non active function".
newslist_screen.dart
import 'package:flutter/material.dart';
import 'package:technewsfeeder/webview_screen.dart';
import 'package:technewsfeeder/fetch_newsdata.dart';
class NewsListScreen extends StatefulWidget {
// "static const" is always as this value.
static const String id = 'newslist_screen';
#override
_NewsListScreenState createState() => _NewsListScreenState();
}
class _NewsListScreenState extends State<NewsListScreen> {
Future<List<NewsDataList>> _savedList;
// Animation controller init method
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Tech News App'),
),
body: FutureBuilder(
future: fetchNewsData(),
builder: (context, snapshot) {
return snapshot.data != null
? listViewWidget(snapshot.data)
: Center(child: CircularProgressIndicator());
}),
);
}
Widget listViewWidget(List<NewsDataList> article) {
return Container(
child: ListView.builder(
itemCount: 20,
padding: const EdgeInsets.all(2.0),
itemBuilder: (context, position) {
return Card(
child: ListTile(
title: Text(
'${article[position].title}',
style: TextStyle(
fontSize: 18.0,
color: Colors.black,
fontWeight: FontWeight.bold),
),
leading: Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
child: article[position].urlToImage == null
? Image(
image: AssetImage(''),
)
: Image.network('${article[position].urlToImage}'),
height: 100.0,
width: 100.0,
),
),
// *******
// I would like to put Favorite function here.
// *****
onTap: () {
print(article[position].url);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => WebViewScreen(url: article[position].url)),
);
},
),
);
}),
);
}
}
}
This is to get Json data from URL.
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';
class NewsDataList {
final String title;
final String url;
final String urlToImage;
NewsDataList({this.title, this.url, this.urlToImage});
factory NewsDataList.fromJson(Map<String, dynamic> json) {
return NewsDataList(
title: json['title'] as String,
url: json['url'] as String,
urlToImage: json['urlToImage'] as String,
);
}
}
Future<List<NewsDataList>> fetchNewsData() async {
List<NewsDataList> list;
String url = "http://newsapi.org/v2/top-headlines?country=jp&category=technology&apiKey=f289d460a5f94d4087d54cd187becceb";
var res = await http.get(Uri.encodeFull(url), headers: {"Accept": "application/json"});
print(res.body);
if(res.statusCode == 200){
var data = json.decode(res.body);
var rest = data["articles"] as List;
print(rest);
list = rest.map<NewsDataList>((json) => NewsDataList.fromJson(json)).toList();
return list;
} else {
throw Exception('Failed to load album');
}
}
V/r,

Answer 1

here is how you can about setting up the favourite button.
from list tile constructors we can use the trailing widget to set up a favorite button
const
ListTile(
{Key key,
Widget leading,
Widget title,
Widget subtitle,
Widget trailing,
bool isThreeLine: false,
bool dense,
EdgeInsetsGeometry contentPadding,
bool enabled: true,
GestureTapCallback onTap,
GestureLongPressCallback onLongPress,
bool selected: false}
)
First set up your list tile
ListTile(
leading: FlutterLogo(),
title: Text("article Title here"),
trailing: IconButton(
icon: Icon(
Icons.favorite,
color: _selectedIndex != null && _selectedIndex == position
? Colors.redAccent
: Colors.grey,
),
onPressed: (){
_onSelected(position);})
then how to change icon color on tap
int _selectedIndex;
_onSelected(int index) {
//https://inducesmile.com/google-flutter/how-to-change-the-background-color-of-selected-listview-in-flutter/
setState(() {
_selectedIndex = index;
});
}