FWidget takes care to provide elegant components to help you build beautiful applications.


Today, one of the most elegant components FWidget brings to developers is ~ FLoading.

In a real-world application scenario, building Loading elements seems to be a skill every developer must master. Now FLoading is here to help developers further refine this skill.

FLoading provides a minimalist way to build Loading elements and a number of highly customizable configurations for developers to easily create beautiful Loading.

✨ features

So, let’s see what FLoading has brought to the table.

  • Provide the most convenient way to control the display/hide of Loading

  • You can change the background color

  • Automatic timing hiding is supported

  • Support for local and global custom styles


🛸 transfer zone

🛸 [Portal: FLoading Github home page]

📖 [Portal: FLoading document]

🌈 Display/Hide

Simple and effective, all in one go




/ / / show

///

/// show

FLoading.show(context);





/ / / hide

///

/// hide

FLoading.hide();

Copy the code

It’s so easy to show/hide Loading via FLoading.

💎 Custom styles

Flexible enough to shine


FLoading allows developers the freedom to define either a global Loading style or a single display Loading style.

Customize global styles



/// define the global Loading style

///

///Define global loading style

FLoading.init(CupertinoActivityIndicator(), backgroundColor: Colors.black38);



/ / / show

///

/// show

FLoading.show(context);

Copy the code

After customizing global styles, developers can easily use FLoading. Show (context); , a uniform Loading style can be constructed at any position globally.

Custom single style

FLoading.show(context,

  

  /// configure a single style by loading

  ///

  /// One-shot style configuration via loading

  loading: Image.asset(

    "assets/loading_gif_2.gif".

    width: 100.

    height: 100.

  ));

Copy the code

Even after the global style is defined, FLoading allows the developer to specify a specific Loading style for a single build in a specific location.

🛰 Timing hide and background color

Care about the developer in detail


FLoading.show(

  context,

  loading: Image.asset(

    "assets/loading_gif_1.gif".

    width: 200.

    height: 200.

  ),



  /// time hide

  ///

  /// Timed hiding

  duration: 3000.



  /// configure the background style

  ///

  /// Configure background style

  color: Colors.red[300].withOpacity(0.3),

)

Copy the code

FLoading provides a configuration that automatically hides and changes background colors on a regular basis to satisfy developers’ unlimited creativity.

Want more details? Please visit theFLoadingOfficial homepage (PS: Don’t forget to submit one you agree withStarOh 😘).

How do I use 😃?

Add dependencies to the project pubspec.yaml file:

🌐 pub Dependent mode

dependencies:

Floading: ^< version >

Copy the code

⚠️ Note, go to pub to obtain the latest version number of FLoading

🖥 Git dependency mode

dependencies:

  floading:

    git:

      url: '[email protected]:Fliggy-Mobile/floading.git'

      ref: '< branch number or tag>'

Copy the code

⚠️ Note that the branch number or tag is subject to the official FLoading project.


Feeling good? Please go to FLoading’s Github page and submit a Star you like at 🌟!

More exciting components

  • FSuper – Helps developers build beautifully complex views quickly

  • FButton – Lots of nice configuration options for developers

  • FSwitch – Beautiful switch elements with excellent interaction and visuals

  • FRadio – a radio component for almost any radio scenario

  • FFloat — Everything you can imagine for a floating element

  • FRefresh – Easily build pull-down refresh effects

  • FDottedLine – Brilliant dotted line effect

  • FSearch – a complete search box component

  • FToast – Delicate and flexibleFlutternativeToastcomponent