问题

你遇到的问题是因为GlassPlayerCard组件内部使用了BlocProvider.of<MusicControlBloc>(context)来获取MusicControlBloc，但是在GlassPlayerCard所在的上下文中找不到MusicControlBloc。为了解决这个问题，你可以尝试以下几种方法：

将BlocProvider<MusicControlBloc>包装在MyApp中：

在MyApp中包装BlocProvider，以便整个应用程序都可以访问MusicControlBloc。你已经在main.dart中使用MultiProvider包装MyApp，但似乎忽略了MusicControlBloc的提供。确保在providers列表中添加BlocProvider来提供MusicControlBloc。
将GlassPlayerCard从context中独立出来：

如果GlassPlayerCard是在某个具有context的子部件中使用的，你可以尝试将GlassPlayerCard提升到更高层次的部件，以便它可以访问到MusicControlBloc。这可以通过在包含GlassPlayerCard的父部件中使用BlocProvider.of<MusicControlBloc>(context)来实现。
通过构造函数传递MusicControlBloc：

你可以尝试将MusicControlBloc作为GlassPlayerCard的构造函数参数传递，而不是从context中获取它。这样，你可以在创建GlassPlayerCard实例时将MusicControlBloc传递给它，而不必依赖context。确保在使用GlassPlayerCard的地方将MusicControlBloc传递给它。

以下是一些可能的解决方法，你可以根据你的项目结构和需求选择其中一个或多个来解决上述问题。希望这些建议有助于解决你的上下文错误问题。

英文:

I have a reusable widget I created below as part of a UI for my app
The code for the reusable widget is below

// ignore_for_file: prefer_typing_uninitialized_variables

import &#39;package:flutter/material.dart&#39;;
import &#39;package:flutter_bloc/flutter_bloc.dart&#39;;
import &#39;package:musica/musica/domain/entities/riverpod_file.dart&#39;;
import &#39;package:musica/musica/presentation/manager/music_control_bloc.dart&#39;;
import &#39;package:musica/musica/presentation/widgets/constants.dart&#39;;
import &#39;package:musica/musica/presentation/widgets/reused_widgets/glassmorphism.dart&#39;;
import &#39;package:provider/provider.dart&#39;;

class GlassPlayerCard extends StatelessWidget {
  final String currentPlayingMusicTitle;
  final String musicArtist;
  final String imageLink;
  final MusicControlBloc? musicControlBloc;

  GlassPlayerCard(
      {required this.currentPlayingMusicTitle,
      required this.musicArtist,
      required this.imageLink,
      this.musicControlBloc})
      : super(key: UniqueKey());

  @override
  Widget build(BuildContext context) {
    final musicBloc = BlocProvider.of&lt;MusicControlBloc&gt;(context);
    final musicPlayerProvider = Provider.of&lt;MusicPlayerProvider&gt;(context);
    return GlassMorphicContainer(
        500.0,
        100.0,
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  addHorizontalSpacing(10),
                  Column(
                    children: [
                      addVerticalSpacing(15),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(20),
                              border: Border.all(color: textColor, width: 2)),
                          height: 60,
                          width: 60,
                          child: Image.network(
                            imageLink,
                          ),
                        ),
                      ),
                    ],
                  ),
                  addHorizontalSpacing(10),
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        addVerticalSpacing(10),
                        Text(currentPlayingMusicTitle,
                            overflow: TextOverflow.ellipsis,
                            style: mediumWhiteTextStyle),
                        Text(musicArtist,
                            style:
                                smallWhiteTextStyle.copyWith(color: textColor)),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                // GestureDetector(
                //     onTap: () {
                //       musicPlayerProvider.pauseMusic();
                //     },
                //     child: I
                //     con(Icons.pause, color: textColor)),
                addHorizontalSpacing(10),
                BlocBuilder&lt;MusicControlBloc, MusicControlState&gt;(
                    builder: (context, state) {
                  if (state is MusicControlInitialState) {
                    return GestureDetector(
                        onTap: () {
                          musicBloc.add(MusicControlPlayEvent());
                        },
                        child: Icon(Icons.play_arrow, color: textColor));
                  } else if (state is MusicControlLoadingState) {
                    return const Center(
                      child: CircularProgressIndicator(
                        color: kDefaultIconDarkColor,
                        value: 0.5,
                        strokeWidth: 2,
                        key: Key(&#39;musicLoading&#39;),
                      ),
                    );
                  } else if (state is MusicControlPlayingState) {
                    return GestureDetector(
                        onTap: () {
                          musicBloc.add(MusicControlPlayEvent());
                        },
                        child: Icon(Icons.pause, color: textColor));
                  } else {
                    return Container();
                  }
                }),
                addHorizontalSpacing(10),
                Icon(Icons.skip_previous, color: textColor),
                addHorizontalSpacing(20),
                Icon(Icons.skip_next, color: textColor),
                addHorizontalSpacing(50),
              ],
            ),
          ],
        ));
  }
}

I used it in my ui app as below

import &#39;package:audioplayers/audioplayers.dart&#39;;
import &#39;package:flutter/material.dart&#39;;
import &#39;package:flutter_bloc/flutter_bloc.dart&#39;;
import &#39;package:musica/generated/assets.dart&#39;;
import &#39;package:musica/musica/domain/entities/riverpod_file.dart&#39;;
import &#39;package:musica/musica/presentation/manager/music_control_bloc.dart&#39;;
import &#39;package:musica/musica/presentation/widgets/constants.dart&#39;;
import &#39;package:musica/musica/presentation/widgets/reused_widgets/animated_like_button.dart&#39;;
import &#39;package:musica/musica/presentation/widgets/reused_widgets/custom_app_bar.dart&#39;;
import &#39;package:musica/musica/presentation/widgets/reused_widgets/glass_player_card.dart&#39;;
import &#39;package:musica/musica/presentation/widgets/reused_widgets/music_card_widget.dart&#39;;
import &#39;package:provider/provider.dart&#39;;
class CollectionDetailsWrapper extends StatelessWidget {
const CollectionDetailsWrapper({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) =&gt; MusicControlBloc(),
);
}
}
class CollectionDetailsPage extends StatefulWidget {
final String imageUrl;
final String title;
final String artistName;
final int fans;
final String trackList;
const CollectionDetailsPage(
{Key? key,
required this.imageUrl,
required this.title,
required this.artistName,
required this.fans,
required this.trackList})
: super(key: key);
@override
State&lt;CollectionDetailsPage&gt; createState() =&gt; _CollectionDetailsPageState();
}
class _CollectionDetailsPageState extends State&lt;CollectionDetailsPage&gt; {
MusicPlayerProvider musicPlayerProvider = MusicPlayerProvider();
late Future trackListFuture;
final audioPlayer = AudioPlayer();
bool isPlaying = false;
Duration position = const Duration(seconds: 0);
Duration duration = const Duration(seconds: 0);
String currentPlayingMusicTitle = &#39;&#39;;
String currentPlayingMusicArtist = &#39;&#39;;
String currentTrackLink = &#39;&#39;;
@override
void initState() {
super.initState();
trackListFuture = musicPlayerProvider.getTrackList(widget.trackList);
audioPlayer.onPlayerStateChanged.listen((event) {
setState(() {
isPlaying = event == PlayerState.playing;
});
});
audioPlayer.onDurationChanged.listen((newDuration) {
setState(() {
duration = newDuration;
});
});
audioPlayer.onPositionChanged.listen((newPosition) {
setState(() {
position = newPosition;
});
});
}
@override
Widget build(BuildContext context) {
final musicProvider =
Provider.of&lt;MusicPlayerProvider&gt;(context, listen: false);
final height = MediaQuery.of(context).size.height;
return Scaffold(
bottomNavigationBar: GlassPlayerCard(
imageLink: widget.imageUrl,
currentPlayingMusicTitle: currentPlayingMusicTitle,
musicArtist: currentPlayingMusicArtist,
),
extendBodyBehindAppBar: true,
extendBody: true,
appBar: const PreferredSize(
preferredSize: Size.fromHeight(50), child: CustomAppBar()),
body: Column(
children: [
Stack(clipBehavior: Clip.none, children: &lt;Widget&gt;[
Container(
decoration: BoxDecoration(
color: Colors.transparent,
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
widget.imageUrl,
),
),
),
height: height,
),
Container(
height: height,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [
backgroundColor,
Colors.transparent.withOpacity(0.5),
],
stops: const [0.5, 0.9],
)),
),
Positioned.fill(
child: ListView(
scrollDirection: Axis.vertical,
children: [
Column(
children: [
Container(
height: 234,
width: 360,
decoration: BoxDecoration(
color: backgroundColor,
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: NetworkImage(widget.imageUrl),
fit: BoxFit.cover,
),
),
),
Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(
widget.title,
style: const TextStyle(
color: Color(0xffa4c7c6), fontSize: 25),
),
),
addVerticalSpacing(10),
Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(
widget.artistName,
style: const TextStyle(
color: Color(0xffa4c7c6), fontSize: 15),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Image.asset(
Assets.iconsPlayAllIcon,
height: 36,
)),
addHorizontalSpacing(5),
Expanded(
child: Image.asset(
Assets.iconsAddToCollecIcon,
height: 36,
)),
addHorizontalSpacing(5),
const Expanded(
child: AnimatedLikeButton(
text: &quot;Like&quot;,
animationPath:
Assets.lottieAnimationsLike)),
],
),
),
],
),
SizedBox(
height: height - 510,
child: FutureBuilder(
future: trackListFuture,
initialData: const Center(
child: CircularProgressIndicator(
color: Colors.white,
backgroundColor: Colors.white,
)),
builder: (context, snapshot) {
if (snapshot.hasError) {
return const Center(
child: Text(
&#39;Something went wrong&#39;,
style: mediumWhiteTextStyle,
));
}
if (snapshot.connectionState ==
ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(
color: textColor,
),
);
}
return ListView.builder(
shrinkWrap: true,
physics: const ScrollPhysics(),
itemCount: musicPlayerProvider.musicList.length,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return MusicCardWidget(
name: musicPlayerProvider.musicList[index].name,
artist:
musicPlayerProvider.musicList[index].artist,
duration: musicPlayerProvider
.musicList[index].duration,
trackLink:
musicPlayerProvider.musicList[index].link,
onTapped: () {
musicProvider.playMusic(musicPlayerProvider
.musicList[index].link);
setState(() {
currentPlayingMusicArtist =
musicPlayerProvider
.musicList[index].artist;
currentPlayingMusicTitle =
musicPlayerProvider
.musicList[index].name;
currentTrackLink = musicPlayerProvider
.musicList[index].link;
});
},
);
},
);
}),
)
],
),
)
]),
],
),
);
}
}

Now the problem is I keep getting context errors

The following assertion was thrown building GlassPlayerCard-[#fc2aa](dirty):
BlocProvider.of() called with a context that does not contain a MusicControlBloc.
No ancestor could be found starting from the context that was passed to BlocProvider.of&lt;MusicControlBloc&gt;().
This can happen if the context you used comes from a widget above the BlocProvider.
The context used was: GlassPlayerCard-[#fc2aa](dirty)

irrespective of where I place the bloc provider that provides the bloc to the rest of the app. Even wrapping my main MyApp function with the bloc provider doesn't work.

I tried to add the bloc as a constructor to the reusable widget GlassPlayerCard but it didnt solve the problem. Kindly assist, please.

This is my main.dart

import &#39;package:flutter/material.dart&#39;;
import &#39;package:musica/musica/domain/entities/riverpod_file.dart&#39;;
import &#39;package:musica/musica/presentation/pages/screens/home.dart&#39;;
import &#39;package:provider/provider.dart&#39;;
void main() {
runApp(MultiProvider(
builder: (context, _) {
return const MyApp();
},
providers: [
ChangeNotifierProvider(create: (context) =&gt; MusicPlayerProvider()),
],
));
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
);
}
}

答案1

得分: 1

你的代码中实际上没有将 bloc 传递给 GlassPlayerCard。原因是你创建了一个 CollectionDetailsWrapper，其中包含一个 BlocProvider，但从你展示的代码片段中看，你实际上没有在任何地方使用它。你还需要传递一个 Widget 子属性，以便将详细信息页面添加为子元素。

确保你将 CollectionDetailsPage 包装在 CollectionDetailsWrapper 中，就像这样：

// 你的新包装定义
class CollectionDetailsWrapper extends StatelessWidget {
  final Widget child;
  const CollectionDetailsWrapper({Key? key, required this.child}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => MusicControlBloc(),
      child: child,
    );
  }
}

/// 你在声明详细信息页面的任何地方的新实现
...
CollectionDetailsWrapper(
  child: CollectionDetailsPage(...),
),
...

注意：以上只是代码的翻译部分，没有其他内容。

英文:

Nowhere in your code you are actually passing the bloc to the GlassPlayerCard. Reason is you created a CollectionDetailsWrapper That contains a BlocProvider, but you're not really using it anywhere (at least from the snippets you've shown). You also need to pass in a Widget child property so you can add the details page as the child

Make sure you are Wrapping your CollectionDetailsPage with your CollectionDetailsWrapper and that should do it. Like this:

// Your new wrapper definition
class CollectionDetailsWrapper extends StatelessWidget {
final Widget child;
const CollectionDetailsWrapper({Key? key, required this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) =&gt; MusicControlBloc(),
child: child,
);
}
}
/// your new implementation wherever you are declaring your details page
...
CollectionDetailsWrapper(
child: CollectionDetailsPage(...),
),
...

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何使我的 bloc 在一个可重用的小部件中工作？

问题

答案1

在Android中正确检查用户是否已登录。

如何在不使用MultiProvider包装MaterialApp的情况下初始化Provider。

为什么符号 ‘add’ 无法解析？

如何在Jetpack Compose中的动态按钮上显示加载器

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论