Using repositoryprovider to simplify the value passing of parent-child components

Preface

In the actual development process , The parent-child components often pass values , Generally speaking, there are three ways ：

• Constructors pass values ： The parent component passes the objects required by the child component to the child component through the constructor ;

• Singleton object ： Building singleton objects , Make the parent and child components use the same object ;

• Containers ： Store objects in containers , When the parent and child components are used, they are directly obtained from the container .

The drawback of the first approach is if the components are deeply nested , Data objects need to be passed layer by layer , Will make the code difficult to maintain . In the second way, you need to build your own singleton class , In fact, there may be many instances of the object to be passed . The third is similar to the single case , It is not appropriate to store an indefinite number of instance objects into a container .flutter_bloc  It provides a component-based dependency injection method to solve this kind of problem , By using  

RepositoryProvider

, You can provide shared objects for sub components of the component tree , This shared object can only be used in the component tree , Can pass  

Provider

  To access this object .

RepositoryProvider Definition

Repository

  It's actually  

Provider

  A subclass of , Realize the sharing of component tree objects by registering singletons , Therefore, its registered objects will follow  

Provider

  Destroyed for cancellation , And this object doesn't have to be  

Bloc

  Subclass . So you can't use  

Bloc

  When transferring shared objects , have access to  

RepositoryProvider

  To complete .RepositoryProvider There are two ways to create object sharing ,

create

  and  

value

  The way , among  

create

  Is to create a new object by calling a method , and  

value

  Is to share an existing object .

RepositoryProvider

Is defined as follows ：

class RepositoryProvider<T> extends Provider<T>
 with RepositoryProviderSingleChildWidget {
 RepositoryProvider({
 Key? key,
 required Create<T> 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<T>(BuildContext context, {bool listen = false}) {
 try {
 return Provider.of<T>(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<$T>().

 This can happen if the context you used comes from a widget above the RepositoryProvider.

 The context used was: $context
 ''',
 );
 }
 }
}


RepositoryProviderSingleChildWidget Itself is an empty  Mixin：

mixin RepositoryProviderSingleChildWidget on SingleChildWidget {}


, The note says that its purpose is to facilitate  

MultiRepositoryProvider

infer

RepositoryProvider

Type design . You can see that actually  

RepositoryProvider

Namely  

Provider

, Just put the static method  

of

  Of

listen

  The parameter is set to... By default  

false

  了 , That is, do not listen for changes in state objects . We access shared objects in two ways in subcomponents ：

//  The way 1
context.read<T>()
//  The way 2
RepositoryProvider.of<T>(context)


If there are multiple objects to share , have access to

MultiRepositoryProvider

, It's also used in the same way as  MultiProvider  identical  ：

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


RepositoryProvider  application

Review our previous use of

Use  BLoC  structure  Flutter  Page instance of

Code for , Inside, our page is divided into three parts ：

• Avatar and background ：
  _getBannerWithAvatar
  ;

• The personal data ：
  _getPersonalProfile
  ;

• Personal data statistics ：
  _getPersonalStatistic
  .

Three component building functions are used to complete . The corresponding interface is as follows ：

PersonalEntity personalProfile = personalResponse.personalProfile!;
 return Stack(
 children: [
 CustomScrollView(
 slivers: [
 _getBannerWithAvatar(context, personalProfile),
 _getPersonalProfile(personalProfile),
 _getPersonalStatistic(personalProfile),
 ],
 ),
 // ...
 ],
 );
 },
//...


You can see , Every function needs to put  

personalProfile

  This object is passed through the parameters of the function , And if the component in the function has subordinate components that need this object , We need to continue to pass down . If you need to modify the way the object passes values , It needs to be modified level by level along the component tree , It will be inconvenient to maintain . Let's transform , Replace the three function building components with customized  Widget, And replace the personal statistics area with two-level components , The modified component tree is as follows （ The level of decoration class is omitted ）.

After disassembly , We can simplify

personalProfile

  The value is passed .

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


Use here

value

The pattern is because  

personalProfile

  Has been created . And then when you need to use  

personalProfile

  The place of , Use

context.read<PersonalEntity>()

You can start from  

RepositoryProvider

  Remove from

personalProfile

Object , Thus, each sub component does not need to pass the object . With BannerWithAvatar  For example , As shown below ：

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<PersonalEntity>().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 simpler and easier to maintain . The specific source code has been uploaded to ：

BLoC  Status management code

, You can download it for reference .

summary

This article introduces  

RepositoryProvider

  Use , actually  

RepositoryProvider

  To borrow

Provider

  Implement a local shared object container on the component tree . Through this container , by

RepositoryProvider

The sub component tree of is injected with shared objects , So that sub components can be from  

context

  In or use

RepositoryProvider.of

  Get shared object using static method . In this way, the value transfer of component tree is avoided , Make the code more concise and easy to maintain .