Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how Flutter uses RepositoryProvider to solve cross-component value passing problems". In daily operation, I believe many people have doubts about how Flutter uses RepositoryProvider to solve cross-component value passing problems. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how Flutter uses RepositoryProvider to solve cross-component value passing problems". Next, please follow the editor to study!

Preface

In the actual development process, we often encounter the situation of parent-child components passing values, generally speaking, there are three ways:

Constructor pass value: the parent component passes the objects needed by the child component to the child component through the constructor

Singleton object: build a singleton object so that the parent and child components use the same object

Container: the object is stored in the container, and the parent and child components get it directly from the container when it is used.

The drawback of the first approach is that if the components are deeply nested and the data objects need to be passed layer by layer, the code will be difficult to maintain. The second approach requires you to build your own singleton class, when in fact there may be many instances of the object to be passed. The third is similar to a singleton, where it is not appropriate to store an indefinite number of instance objects in a container. Flutter_bloc provides a component-based dependency injection method to solve these problems. By using RepositoryProvider, you can provide a shared object for sub-components of the component tree. This shared object can only be used in the component tree and can be accessed by Provider.

RepositoryProvider definition

Repository is actually a subclass of Provider, and the component tree object is shared by registering a singleton, so the registered object is destroyed with the logout of Provider, and the object does not need to be a Bloc subclass. So when you cannot use Bloc to transfer shared objects, you can use RepositoryProvider to do so. RepositoryProvider has two ways to create object sharing, create and value, where create creates a new object by calling a method, while value shares an existing object. RepositoryProvider is defined as follows:

Class RepositoryProvider extends Provider with RepositoryProviderSingleChildWidget {RepositoryProvider ({Key? Key, required Create create, Widget? Child, bool? Lazy,}): super (key: key, create: create, dispose: (_, _) {}, child: child, lazy: lazy,); RepositoryProvider.value ({Key? Key, required T value, Widget? Child,}): super.value (key: key, value: value, child: child,); static T of (BuildContext context, {bool listen = false}) {try {return Provider.of (context, listen: listen);} on ProviderNotFoundException catch (e) {if (e.valueType! = T) rethrow Throw FlutterError (''RepositoryProvider.of () called with a context that does not contain a repository of type $T. No ancestor could be found starting from the context that was passed to RepositoryProvider.of (). This can happen if the context you used comes from a widget above the RepositoryProvider. The context used was: $context'',);}

The RepositoryProviderSingleChildWidget itself is an empty Mixin:

Mixin RepositoryProviderSingleChildWidget on SingleChildWidget {}

The comment states that its purpose is to make it easier for MultiRepositoryProvider to infer the type design of RepositoryProvider. You can see that RepositoryProvider is actually Provider, except that the listen parameter of the static method of is set to false by default, that is, it does not listen for changes in the state object. We access the shared object in two ways in the subcomponent:

/ / Mode 1context.read () / / Mode 2RepositoryProvider.of (context)

If you have multiple objects to share, you can use MultiRepositoryProvider in the same way as MultiProvider:

MultiRepositoryProvider (providers: [RepositoryProvider (create: (context) = > RepositoryA (),), RepositoryProvider (create: (context) = > RepositoryB (),), RepositoryProvider (create: (context) = > RepositoryC (),),], child: ChildA (),) RepositoryProvider application

Review the code we used to imitate the Nuggets home page using BlocBuilder, where our page is divided into three parts:

Profile picture and background image: _ getBannerWithAvatar

Personal data: _ getPersonalProfile

Personal data statistics: _ getPersonalStatistic.

It is done using three functions that build the component. The corresponding interface is as follows:

PersonalEntity personalProfile = personalResponse.personalProfileholders; return Stack (children: [CustomScrollView (slivers: [_ getBannerWithAvatar (context, personalProfile), _ getPersonalProfile (personalProfile), _ getPersonalStatistic (personalProfile),],), / /.]) }, / /...

As you can see, each function needs to pass the personalProfile object through the function's arguments, and if the components in the function have subordinate components that need this object, you need to continue to pass it down. If this needs to change the way the object passes values, it needs to be modified step by step along the component tree, which will be very inconvenient to maintain. Let's change the three function building components to custom Widget, and change the personal statistics area to two-level components. The modified component tree is shown below (the level of decoration class is omitted).

Component level

After disassembling, we can simplify the passing of personalProfile.

RepositoryProvider.value (child: CustomScrollView (slivers: [const BannerWithAvatar (), const PersonalProfile (), const PersonalStatistic (),],), value: personalProfile,), / /.

The value pattern is used here because personalProfile has been created. Then, where you need to use personalProfile, you can use context.read () to pull the personalProfile object from the RepositoryProvider, so that the subcomponents no longer have to pass the object. Take BannerWithAvatar as an example, as follows:

Class BannerWithAvatar extends StatelessWidget {final double bannerHeight = 230; final double imageHeight = 180; final double avatarRadius = 45; final double avatarBorderSize = 4; const BannerWithAvatar ({Key? Key}): super (key: key) Override Widget build (BuildContext context) {return SliverToBoxAdapter (child: Container (height: bannerHeight, color: Colors.white70, alignment: Alignment.topLeft, child: Stack (children: [Container (height: bannerHeight,), Positioned (top: 0, left: 0) Child: CachedNetworkImage (imageUrl: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=688497718,308119011&fm=26&gp=0.jpg', height: imageHeight, width: MediaQuery.of (context). Size.width, fit: BoxFit.fill,) Positioned (left: 20, top: imageHeight-avatarRadius-avatarBorderSize, child: _ getAvatar (context.read (). Avatar, avatarRadius * 2, avatarBorderSize,),],),) } Widget _ getAvatar (String avatarUrl, double size, double borderSize) {return Stack (alignment: Alignment.center, children: [Container (width: size + borderSize * 2, height: size + borderSize * 2, clipBehavior: Clip.antiAlias, decoration: BoxDecoration (color: Colors.white, borderRadius: BorderRadius.circular (size / 2 + borderSize),)) Container (width: size, height: size, clipBehavior: Clip.antiAlias, decoration: BoxDecoration (color: Colors.black, borderRadius: BorderRadius.circular (size / 2),), child: CachedNetworkImage (imageUrl: avatarUrl, height: size, width: size, fit: BoxFit.fill,)) ]) }}

You can see that the whole code is cleaner and easier to maintain.

At this point, the study on "how Flutter uses RepositoryProvider to solve the problem of passing values across components" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.