Make favorite function button on flutter app

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;
        });
      }