Flutter Tutorial

Friday, 30 August 2019

A flutter Package to show custom alert Dialog

flutter Flutter Tutorial , Tutorial

Fancy Flutter Alert Dialog

A flutter Package to show custom alert Dialog,you can choose between two themes 'Fancy' and 'Flat'

The package is available in fancy_dialog

Usage

Import the Package

add this dependencies to your app
dependencies: fancy_dialog: ^1.0.1

Use the Package

add this import statement
import 'package:fancy_dialog/fancy_dialog.dart';

to show a Basic Dialog

showDialog(
              context: context,
              builder: (BuildContext context) => FancyDialog(
                title: "Fancy Gif Dialog",
                descreption: "This is descreption for fancy gif,you can load any image or gif to be displayed :), and you can choose between two themes Fancy and Flat",
                )
            ) 
         },

the title and descreption are required
and the rest of the parameters are :

okFun : the function to be called when the user press Ok button (positive button)
cancelFun : the function to be called when the user press cancel button (negative button)
cancelColor : the color of the negative button, by default it's Colors.grey
oklColor : the color of the positive button, by default it's Colors.pink
ok : the text of the positive button, by default it's 'OK !'
cancel : the text of the negative button, by default it's 'cancel'
animationType : The type of the animation, there are 4 types,which are :
- FancyAnimation.LEFT_RIGHT the default one
- FancyAnimation.RIGHT_LEFT
- FancyAnimation.TOP_BOTTOM
- FancyAnimation.BOTTOM_TOP
gifpath : the path for the image or the GIF to be displayed,or you can choose between 6 Gifs the package provides :
- FancyGif.MOVE_FORWARD the default one
- FancyGif.CHECK_MAIL
- FancyGif.FUNNY_MAN
- FancyGif.PLAY_MEDIA
- FancyGif.SUBMIT
- FancyGif.SHARE
theme : Fancy or Flat
- FancyTheme.FANCY
- FancyTheme.FLAT

The dialog will be dissmised by default when the user click Ok or cancel, DON'T ADD
Navigator.of(context).pop() to okFun or cancelFun

GitHub

Custom Layout with interactive add button to impove your UI and UX

flutter Flutter Tutorial , Tutorial

Interactive Add button layout

Custom Layout with interactive add button to impove your UI and UX .

Usage

Import the Package

add this dependencies to your app
dependencies: interactive_add_button_layout: ^0.1.0

Use the Package

add this import statement
import 'package:interactive_add_button_layout/interactive_add_button_layout.dart';

The layout need to be the root layout of your widget (screen)

and Now to use it, add this code to your widget :

return Scaffold(
      ...
      body: AddButtonLayout( parameters )

The layout has 6 parameters which are :

child : you know what is that xD, in case you don't it's the child of the layout which mean that the layout is his parent .
row : a List of Widgets to be diplayed in a row for the Row layout .
column : a List of Widgets to be diplayed in a column for the Column layout .
onPressed: the function to be called when the user click the add button .
color : the color of the layout (color of the background), by default it's Color(0xff2A1546) .
btnColor : the color of the add button

the row and column and child are required !

Example :

you can find a demo app in ./example

Gif

GitHub

Simple widget for animating a set of images with full custom controls with flutter

flutter Flutter Tutorial , Tutorial

image_sequence_animator

A simple widget for animating a set of images with full custom controls as an alternative to using a GIF file.

It is highly recommended to read the documentation and run the example project on a real device to fully understand and inspect the full range of capabilities.

This simple widget for animating a set of images (a.k.a an image sequence) with full custom controls as an alternative to using a GIF file.

GIF files are, as far as I know, not possible to control. With this package, you will have full control over your image sequence like controlling a video. You can loop, boomerang, change the color, play, pause, stop, skip, rewind, restart and more.

How-to-Use

First, add your image sequence to your assets and update the "pubspec.yaml" accordingly.

Then create an ImageSequenceAnimator widget as shown in the example:

ImageSequenceAnimator(
  "assets/ImageSequence",   //folderName 
  "Frame_",                 //fileName
  0,                        //suffixStart
  5,                        //suffixCount 
  "png",                    //fileFormat 
  60,                       //frameCount
 {Key key,
  fps               : 60,
  isLooping         : false,
  isBoomerang       : false,
  isAutoPlay        : true,
  color             : Colors.white,
  onReadyToPlay     : _onReadyToPlay,
  onStartPlaying    : _onStartPlaying,
  onPlaying         : _onPlaying,
  onFinishPlaying   : _onFinishPlaying})
  
void _onReadyToPlay(ImageSequenceAnimatorState _imageSequenceAnimator);
void _onStartPlaying(ImageSequenceAnimatorState _imageSequenceAnimator);
void _onPlaying(ImageSequenceAnimatorState _imageSequenceAnimator);
void _onFinishPlaying(ImageSequenceAnimatorState _imageSequenceAnimator);

Further Explanations:

For a complete set of descriptions for all parameters and methods, see the documentation.

[isLooping] will override [isBoomerang] if both are set to true.
All [ImageSequenceProcessCallback] callbacks will return a reference to the created [ImageSequenceAnimator] state. You can save this instance for
further actions.
Use [ImageSequenceAnimatorState]'s
[void setIsLooping(bool isLooping)], [void setIsBoomerang(bool isBoomerang)], [void setColor(Color color)], [void play({double from: -1.0})],
[void rewind({double from: -1.0})], [void pause()], [void skip(double value, {double percentage: -1.0})], [void restart()], [void stop()]
methods for the corresponding actions.
Use [ImageSequenceAnimatorState]'s [double get currentTime] and [double get totalTime] methods to get the respective values.