質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

button

HTMLで用いる<button>タグです。

Q&A

解決済

1回答

1074閲覧

Flutterのfavorite_buttonを使うと動的に色が変わらない

ringoringogogo

総合スコア15

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

button

HTMLで用いる<button>タグです。

0グッド

0クリップ

投稿2021/04/23 11:43

編集2021/04/23 12:19

Flutter初心者です。

favorite_buttonを使っているのですが、思うようにsetStateがきかず原因がわからず困っています・・

以下、サンプルプログラムを作成しました。
Webページをお気に入り登録できるようにし、SharedPreferencesに存在するときはisBookmarked=trueとなるようにしています。

このfavorite_buttonのpackageが原因かどうかを探るためにIcons.bookmarkを設置してみて同じ変数(isBookmarked)で色が変わるか試したところ、Icons.bookmarkであれば正しく色が変わりました。

favorite_buttonを使って、同じようにisBookmarkedで色を制御したいのですがどのようにすれば良いかわかる方がいらっしゃいましたらご教示いただけないでしょうか。

デバッグしたところsetStateのあと以下の部分のisBookmarkedにはtrueが入っていました。

StarButton( isStarred: (isBookmarked),

イメージ説明

直接 isStarred:trueとすると黄色い星になります。
しかしisBookmarkedとするとグレーのままとなってしまいます・・・。
イメージ説明

import 'dart:async'; import 'dart:io'; import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; import 'package:shared_preferences/shared_preferences.dart'; import 'package:favorite_button/favorite_button.dart'; class WebViewScreen extends StatefulWidget { @override _WebViewScreenState createState() => _WebViewScreenState(); } class _WebViewScreenState extends State<WebViewScreen> { //サイトタイトルを取得するために必要 final Completer<WebViewController> _controller = Completer<WebViewController>(); bool _isLoading = false; String _title = ''; List<String> bookmark = []; String selectedUrl = ''; bool isBookmarked = false; //Androidで日本語入力できるようにする @override void initState() { super.initState(); if (Platform.isAndroid) { WebView.platform = SurfaceAndroidWebView(); } } //ローディング状態とWebサイトタイトルを画面に反映する @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(_title), leading: IconButton( icon: Icon(Icons.bookmark, color: isBookmarked == true ? Colors.grey : Colors.white), onPressed: () { print("tapped"); showDialog( context: context, builder: (_) { registerBookmark(selectedUrl); return AlertDialog( title: Text("タイトル"), content: Text("お気に入り登録しました"), actions: <Widget>[ // ボタン領域 FlatButton( child: Text("OK"), onPressed: () => Navigator.pop(context), ), ], ); }, ); }), actions: <Widget>[ StarButton( isStarred: (isBookmarked), iconSize: 40.0, valueChanged: (_isStarred) { if (_isStarred) { showDialog( context: context, builder: (_) { return AlertDialog( content: Text("お気に入り登録しました"), actions: <Widget>[ FlatButton( child: Text("OK"), onPressed: () => Navigator.of(context) .pop //OKボタンをクリックしてもダイアログが閉じないので一旦OKを消している ) ], ); }, ); } else { showDialog( context: context, builder: (_) { return AlertDialog( content: Text("お気に入り解除しました"), actions: <Widget>[ // ボタン領域 FlatButton( //child: Text("OK"), onPressed: () => Navigator.of(context).pop), ], ); }, ); } }, ), ], ), body: _buildBody(), ); } Future<void> registerBookmark(selectedUrl) async { //BOOKMARKを取得する SharedPreferences prefs = await SharedPreferences.getInstance(); bookmark = prefs.getStringList("BOOKMARK"); if (bookmark == null) { bookmark = [selectedUrl]; } else { bookmark.forEach((element) { if (element == num) { return; } }); bookmark.add(selectedUrl); } await prefs.setStringList("BOOKMARK", bookmark); } Future<bool> getIsBookmarked(selectedUrl) async { //BOOKMARKを取得する SharedPreferences prefs = await SharedPreferences.getInstance(); bookmark = prefs.getStringList("BOOKMARK"); return (bookmark.indexOf(selectedUrl) != -1); } Widget _buildBody() { return Column( children: [ if (_isLoading) const LinearProgressIndicator(), Expanded( child: _buildWebView(), ), ], ); } Widget _buildWebView() { return WebView( initialUrl: 'https://flutter.dev', // jsを有効化 javascriptMode: JavascriptMode.unrestricted, // controllerを登録 onWebViewCreated: _controller.complete, // ページの読み込み開始 onPageStarted: (String url) { // ローディング開始 setState(() { _isLoading = true; selectedUrl = url; }); }, // ページ読み込み終了 onPageFinished: (String url) async { bool _tmpbool = await getIsBookmarked(url); print(_tmpbool.toString()); setState(() { isBookmarked = _tmpbool; print("isBookmarked:" +isBookmarked.toString()); }); // ローディング終了 setState(() { _isLoading = false; }); // ページタイトル取得 final controller = await _controller.future; final title = await controller.getTitle(); setState(() { if (title != null) { _title = title; } }); }, ); } }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

StarButtonkeyに、UniqueKey()をつけてみてください。

dart

1StarButton( 2 key: UniqueKey(),

Keyについての公式動画
https://youtu.be/kn0EOS-ZiIc

投稿2021/04/23 12:42

satokei

総合スコア1168

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ringoringogogo

2021/04/23 14:01

教えていただいた通りにしたらできました!!! 全然わからなかったので本当にありがとうございました・・・!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問