FUISecionParallax

This section features a background image with a parallax scrolling effect. You may commonly encounter this effect in action on the top banners of the demo application.

FUISectionParallax should be considered to be of the same type as FUISectionPlain. You may have multipleFUISectionContainer elements within FUISectionParallax.

Widget Class Location

The FUISectionParallax widget class could be found in:

focus_ui_kit/components/section/fui_section_parallax.dart

Widget Theme Location

The FUISectionTheme class serves as the theme class for FUISectionParallax, equivalent to FUISectionPlain. Kindly explore this theme class to examine various settings applicable to FUISectionParallax.

Accessing the theme

To access the theme class object, do the following:

@override
Widget build(BuildContext context) {
    FUISectionTheme fuiSectionTheme = context.theme.fuiSection;
    
    // ...
}

Usage

@override
Widget build(BuildContext context) {
FUIThemeCommonColors fuiColors = context.theme.fuiColors;

return FUISingleChildScrollView(
  child: FUIColumn(
    children: [
      /// Parallax
      FUISectionParallax(
        height: 400,
        imgProvider: AssetImage('assets/demo-background/bg-dot.jpg'),
        // or NetworkImage('https://www.someurl.com/img.jpg'); if the image source is via network.

        /// BlurHash could be generated via https://blurha.sh
        blurHash:
            '|03R{]t7Rjj[WBWBM{fQofofayayj[j[ayofofWBWBj[ayoft7ayRjt7ofj[t7ofj[t7ayayj[ofRjfQofoft7WBt7WBRjxuWBWBWBRjj[ofofWBRjofayRjt7juofayfQt7oft7offQayRjM{WBofWBayofRjWBfQWBj[',
        child: Center(child: Text('This widget is within the FUISectionParallax', style: TextStyle(color: fuiColors.shade0))),
      ),

      // And the rest of the contents...
      SizedBox(
        height: 1800,
        child: SizedBox.shrink(),
      )
    ],
  ),
);
}

Major Parameters

Parameters	Description
FUISectionImageSource imgSource	Select the source of background image. It can be from asset, or via network. The default is FUISectionImageSource.network
ImageProvider imgProvider	The source of the background image. It can be either AssetImage or NetworkImage or any other instance of ImgProvider.
String? blurHash	BlurHash is optional. But if you think this helps to make a smooth transition feel while loading the image, you may generate the blurhash programmatically or through https://blurha.sh. Please read more in https://blurha.sh.
BoxFit imgFit	The choice of how the background image should be fitted within the parallax container. The default is BoxFit.cover.
double? width	The width of FUISectionParallax. The default is the maximum width of the screen.
double? height	The height of FUISectionParallax. The default is found in FUISectionTheme.parallaxHeight, which is 400. Never have the height to be infinite.

Other Parameters

All other parameters correspond to Flutter’s Container widget.