Сделайте любимую функциональную кнопку с помощью API в приложении flutter

#api #flutter

Вопрос:

Я начинающий Флаттер. Я пытаюсь сделать приложение для магазина . Я хотел бы, чтобы пользователь мог добавлять каждый продукт в избранное и сохранять это избранное на другом экране. Когда я нажимаю на кнопку «Избранное» = = > изменение цвета и элемент, сохраненный на странице списка желаний в той же форме

ПРИМЕЧАНИЕ : я использую API для добавления любимых элементов.

Каков наилучший способ сделать это? Спасибо!

Вот мой текущий код:

 class Menu extends StatefulWidget {
  Menu({
    Key key,
  }) : super(key: key);

  @override
  MenuState createState() => MenuState();
}

class MenuState extends State<Menu> {
 
  String picture;
  String message;
  String picture1;
  List image = [];
  List product;
  List data;
  int id;

  String token;

  @override
  void initState() {
    _loadUserData();
    getJokes();
    super.initState();
  }
  final List<Widget> _children = [
    Principal(),
  ];

  _loadUserData() async {
    SharedPreferences localStorage = await SharedPreferences.getInstance();
    var user = jsonDecode(localStorage.getString('user'));
    if (user != null) {
      setState(() {
        picture = user['picture'];
        token = user['access_token'];
        
      });
    }
  }

  Future<List<dynamic>> getJokes() async {
    var response = await Network().getData('/publication/all');
    data = json.decode(response.body)['message'];
    return data;
    
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        BackgroundColor: Colors.grey[300],
        actions: <Widget>[
          Transform.translate(
            offset: Offset(-90.0, 5.0),
            child:

                // Adobe XD layer: 'logo loccasion' (shape)
                Container(
              width: 150.0,
              height: 100.0,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: const AssetImage('assets/images/title.png'),
                  fit: BoxFit.contain,
                ),
              ),
            ),
          ),
       
          Padding(
            padding: EdgeInsets.fromLTRB(1, 15, 20, 1),
            child: InkWell(
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Myaccount()),
                );
                // do something here
              },
              child: CircleAvatar(
                radius: 12.0,
                backgroundImage: NetworkImage(
                  "http://192.*.*.*/users_images/$picture",
                  headers: {
                    "authorization": "Bearer $token",

                    
                  },
                ),
              ),
            ),
          ),
              IconButton(
              padding: EdgeInsets.fromLTRB(1, 25, 10, 10),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Favories()),
                );
              },
              icon: Image.asset(
                "assets/icons/coeur.png",
              )),
          IconButton(
            padding: EdgeInsets.fromLTRB(1, 20, 10, 10),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => Favories()),
              );
            },
            icon: Image.asset(
              "assets/icons/Calque 2.png",
            ),
          ),
        ],
      ),
      backgroundColor: Colors.white,
      body: Center(
          child: FutureBuilder<List<dynamic>>(
              future: getJokes(),
              builder: (BuildContext context, AsyncSnapshot snapshot) {
                switch (snapshot.connectionState) {
                  case ConnectionState.none:
                    return Text('none');
                  case ConnectionState.waiting:
                    return Center(child: CircularProgressIndicator());
                  case ConnectionState.active:
                    return Text('salut');
                  case ConnectionState.done:
                    if (snapshot.hasError) {
                      return Text(
                        '${snapshot.error.toString()}',
                        style: TextStyle(color: Colors.red),
                      );
                    } else {
                      if (!snapshot.hasData) {
                        return Text('no data');
                      } else {}
                      return GridView.builder(
                          itemCount: snapshot.data.length,
                          gridDelegate:
                              SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 2,
                            childAspectRatio: 0.6,
                            mainAxisSpacing: 6.0,
                            crossAxisSpacing: 6.0,
                          ),
                          itemBuilder: (BuildContext context, int index) {
                            String pic = snapshot.data[index]['picture1'];
                            String price = snapshot.data[index]['price'];
                            String size = snapshot.data[index]['size'];
                            
                            int id =
                                int.parse('${snapshot.data[index]['user_id']}');
                            
                            String ownerpic =
                                snapshot.data[index]['ownerpicture'];
                            return Card(
                              color: Colors.grey[100],
                              child: Padding(
                                padding: EdgeInsets.only(
                                    left: 10.0,
                                    right: 10.0,
                                    bottom: 10.0,
                                    top: 10.0),
                                child: Container(
                                  alignment: Alignment.center,
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: <Widget>[
                                      Row(
                                        children: [
                                          Positioned(
                                            top: 50,
                                            right: 100,

                                            child: InkWell(
                                              onTap: () {
                                                Navigator.push(
                                                  context,
                                                  MaterialPageRoute(
                                                      builder: (context) =>
                                                          UserProfile(
                                                            id: id,
                                                          )),
                                                );
                                               
                                              },
                                              child: CircleAvatar(
                                                radius: 12.0,
                                                backgroundImage: NetworkImage(
                                                  "http://192.*.*.*/users_images/$ownerpic",
                                                  headers: {
                                                    "authorization":
                                                        "Bearer $token",

                                                    
                                                  },
                                                ),
                                              ),
                                            ),
                                          ),
                                          IconButton(
                                              padding: EdgeInsets.fromLTRB(
                                                  100, 5, 10, 5),
                                              onPressed: () {
                                                Navigator.push(
                                                  context,
                                                  MaterialPageRoute(
                                                      builder: (context) =>
                                                          Favories()),
                                                );
                                              },
                                              icon: Image.asset(
                                                "assets/icons/coeur.png",
                                              )),
                                        ],
                                      ),
                                     
                                      Container(
                                        height: 130,
                                        
                                        decoration: BoxDecoration(
                                         
                                          image: DecorationImage(
                                            image: NetworkImage(
                                              'http://192.*.*.*/pub_images/$pic',
                                              headers: {
                                                "authorization":
                                                    "Bearer $token",

                                              },
                                              
                                            ),
                                          ),
                                        ),
                                      ),
                                
                                      SizedBox(
                                        height: 80,
                                      ),
                                      Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: [
                                          Padding(
                                            padding: EdgeInsets.all(5.0),
                                            child: Text(
                                              '$price

введите описание изображения здесь



,
maxLines: 1,
softWrap: true,
textAlign: TextAlign.center,
),
),
Text(
'$size',
style: TextStyle(
color: Colors.black,
fontSize: 15.0),
),
],
),
],
),
),
),
);

bottomNavigationBar: Material(
elevation: 7.0,
color: Colors.white,
child: Container(
height: 50.0,
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => Menu()));
},
child: Container(
height: 50.0,
width: 50.0,
color: Colors.white,
child: Icon(
Icons.apps,
color: Colors.grey,
),
),
),
InkWell(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => TabScreen()));
},
child: Container(
height: 50.0,
width: 50.0,
color: Colors.white,
child: Icon(
Icons.search,
color: Colors.grey,
),
),
),
InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TipCalculatorApp()));
},
child: Container(
height: 50.0,
width: 50.0,
color: Colors.white,
child: Icon(
Icons.add_box,
color: Colors.grey,
),
),
),
InkWell(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => messages()));
},
child: Container(
height: 50.0,
width: 50.0,
color: Colors.white,
child: Icon(
Icons.mail,
color: Colors.grey,
),
),
),
InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SettingsPage()));
},
child: Container(
height: 50.0,
width: 50.0,
color: Colors.white,
child: Icon(
Icons.tune,
color: Colors.grey,
),
),
),
]),
),
),
),
);
}
введите описание изображения здесь