Flutter 包裝在 ValueListenableBuilder 小部件中時無法訪問小部件變量

Question

我剛剛用ValueListenableBuilder包裝了以下文本小部件，現在我無法訪問我的widget.homeTween變量

獲取“無法無條件訪問屬性‘homeTween’，因為接收者可以為‘null’。”

ValueListenableBuilder<Box<String>>(
                valueListenable: _localUser.listenable(),
                builder: (context, box, widget) {
                  return Text(
                    '${getGreetings()!} ${_localUser.get("_firstName")}s',
                    style: TextStyle(
                      color: widget.homeTween!.value as Color,
                      fontSize: 16,
                      fontFamily: 'Nunito Regular',
                    ),
                  );
                },
              ),

像以前一樣工作，沒有問題。

這是整個小部件 class

// Imports:
import 'package:dogbase_app/theme/app_styles.dart';
import 'package:dogbase_app/utilities/helpers/greetings.dart';
import 'package:dogbase_app/utilities/hive/local_user.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gravatar/flutter_gravatar.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:namefully/namefully.dart';

class AnimatedAppBar extends StatefulWidget {
  const AnimatedAppBar({
    Key? key,
    required this.colorAnimationController,
    required this.onPressed,
    required this.colorTween,
    required this.homeTween,
    required this.iconTween,
    required this.drawerTween,
    required this.workOutTween,
    required this.loadpage,
  }) : super(key: key);
  final AnimationController colorAnimationController;

  final Animation<dynamic>? colorTween;
  final Animation<dynamic>? workOutTween;
  final Animation<dynamic>? homeTween;
  final Animation<dynamic>? iconTween;
  final Animation<dynamic>? drawerTween;

  final VoidCallback onPressed;
  final Function loadpage;

  @override
  State<AnimatedAppBar> createState() => _AnimatedAppBarState();
}

class _AnimatedAppBarState extends State<AnimatedAppBar> {
  late Gravatar? _gravatar;

  @override
  void initState() {
    super.initState();
  }

  final _localUser = LocalUser().getUser();

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 65,
      child: AnimatedBuilder(
        animation: widget.colorAnimationController,
        builder: (context, child) => AppBar(
          toolbarHeight: 65,
          leading: IconButton(
            icon: Icon(
              Icons.dehaze,
              color: widget.drawerTween!.value as Color,
            ),
            onPressed: widget.onPressed,
          ),
          backgroundColor: widget.colorTween!.value as Color,
          elevation: 0,
          titleSpacing: 0,
          title: Row(
            children: <Widget>[
              ValueListenableBuilder<Box<String>>(
                valueListenable: _localUser.listenable(),
                builder: (context, box, widget) {
                  return Text(
                    '''${getGreetings()!} ${Namefully(_localUser.get("_firstName").toString())}''',
                    style: TextStyle(
                      color: widget.homeTween!.value as Color,
                      fontSize: 16,
                      fontFamily: 'Nunito Regular',
                    ),
                  );
                },
              ),
            ],
          ),
          actions: <Widget>[
            Icon(
              Icons.notifications,
              color: widget.iconTween!.value as Color,
            ),
            Padding(
              padding: const EdgeInsets.all(10),
              child: GestureDetector(
                onTap: () {
                  widget.loadpage(8, accentColor);
                },
                child: CircleAvatar(
                  backgroundColor: whiteColor,
                  radius: 45,
                  child: ClipOval(
                    child: Image.network(
                      _gravatar!.imageUrl(),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

因為widget現在指的是構建器參數而不是StatefulWidget小部件屬性，請嘗試以下操作：

      builder: (context, box, Widget? child) {
      // ...

和：

// Imports:
import 'package:dogbase_app/theme/app_styles.dart';
import 'package:dogbase_app/utilities/helpers/greetings.dart';
import 'package:dogbase_app/utilities/hive/local_user.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gravatar/flutter_gravatar.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:namefully/namefully.dart';

class AnimatedAppBar extends StatefulWidget {
  const AnimatedAppBar({
    Key? key,
    required this.colorAnimationController,
    required this.onPressed,
    required this.colorTween,
    required this.homeTween,
    required this.iconTween,
    required this.drawerTween,
    required this.workOutTween,
    required this.loadpage,
  }) : super(key: key);
  final AnimationController colorAnimationController;

  final Animation<dynamic>? colorTween;
  final Animation<dynamic>? workOutTween;
  final Animation<dynamic>? homeTween;
  final Animation<dynamic>? iconTween;
  final Animation<dynamic>? drawerTween;

  final VoidCallback onPressed;
  final Function loadpage;

  @override
  State<AnimatedAppBar> createState() => _AnimatedAppBarState();
}

class _AnimatedAppBarState extends State<AnimatedAppBar> {
  late Gravatar? _gravatar;

  @override
  void initState() {
    super.initState();
  }

  final _localUser = LocalUser().getUser();

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 65,
      child: AnimatedBuilder(
        animation: widget.colorAnimationController,
        builder: (context, child) => AppBar(
          toolbarHeight: 65,
          leading: IconButton(
            icon: Icon(
              Icons.dehaze,
              color: widget.drawerTween!.value as Color,
            ),
            onPressed: widget.onPressed,
          ),
          backgroundColor: widget.colorTween!.value as Color,
          elevation: 0,
          titleSpacing: 0,
          title: Row(
            children: <Widget>[
              ValueListenableBuilder<Box<String>>(
                valueListenable: _localUser.listenable(),
                builder: (context, box, _) {
                  return Text(
                    '''${getGreetings()!} ${Namefully(_localUser.get("_firstName").toString())}''',
                    style: TextStyle(
                      color: widget.homeTween!.value as Color,
                      fontSize: 16,
                      fontFamily: 'Nunito Regular',
                    ),
                  );
                },
              ),
            ],
          ),
          actions: <Widget>[
            Icon(
              Icons.notifications,
              color: widget.iconTween!.value as Color,
            ),
            Padding(
              padding: const EdgeInsets.all(10),
              child: GestureDetector(
                onTap: () {
                  widget.loadpage(8, accentColor);
                },
                child: CircleAvatar(
                  backgroundColor: whiteColor,
                  radius: 45,
                  child: ClipOval(
                    child: Image.network(
                      _gravatar!.imageUrl(),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

能夠解決這種color: this.widget.homeTween.,value as Color,

Answer 3

Gwhyyy 指出了這個問題，你可以直接使用 like

ValueListenableBuilder(
  builder: (context, box, _) {
    return Text(
      '',
      style: TextStyle(
        color: widget.homeTween?.value,//null accepted