DEV Community: Aakashp

Automatic Show/Hide FAB on scroll in Flutter

Aakashp — Mon, 09 Jan 2023 18:03:36 +0000

Hello readers, Welcome back to another article on flutter.

In this we will see how to hide or show the Floating action button in flutter app when the user scrolls the screen.

Sometimes it is required to hide the FAB button when user scrolls because it blocks the behind view of the screen.

So this is what we want to do today.

Creating Scroll View
First create a screen with any scrolling view like list view or grid view in it and a Floating action button.

Now to hide the fab on scroll we need to listen to the scrolling events of scroll view.
To listen to the scrolling events we need to give the scroll view a custom scroll controller.

Now we can listen to the scroll events of this list view by add callback to the scroll controller .

Creating Custom FAB
Now create a custom Floating action button which will hide/show automatically based on the scroll event. To do this first create a stateful widget and return FAB in the build method.

Now wrap this FAB inside visibility widget to hide or show the Fab.
Create a Boolean variable isVisible to control the visibility of the visibility widget.

Now in the constructor of this CustomFab widget add a parameter of Scroll Controller. So that we can listen scroll events in this widget.

In the initState method of this widget add a callback to this scroll controller.

Now add a condition that if user scroll down make isVisible to false and if user scrolls up name isVisible to true.

To do this we can use the controller.position.userScrollDirection property of controller. This will give the direction in which the user is scrolling(forward or reverse).

Using this we can add a if condition in callback to show / hide our FAB and update the UI by calling setState.

set the visible parameter of Visibility widget to isVisible.

Another Example
Using similar method we can also achieve something like this with extended Floating action button.

Follow Me

Thanks For reading this article until now, If you liked this than you can also read more articles and follow me.

Aakashp – Medium

Read writing from Aakashp on Medium. Flutter, Java, developer. | Trying to explain concepts in the most straightforward way possible. Every day, Aakashp and thousands of other voices read, write, and share important stories on Medium.

medium.com

AakashpFollow

twitter.com

Understanding Flutter Pageview Widget(Making Instagram reels screen)

Aakashp — Sun, 24 Jul 2022 17:05:00 +0000

Hello readers, welcome back to another article. in the previous article we saw in detail about dismissible widget which we can use to implement slide to delete like the Gmail app.

Today in this article will see in detail the Pageview widget in flutter.

What is Pageview Widget?

Pageview widget is similar to the list view. The only difference is the list view is used to show the list of items on a single screen whereas the page view shows a list of pages to scroll.

A pageview is useful when you want to show a list of full-screen images or videos or any other data. As you have seen in Instagram reels we see a video on a full page and when we scroll to another reel it's a different page.

Understanding Page View Constructor

PageView PageView({
  Key? key,
  Axis scrollDirection = Axis.horizontal,
  bool reverse = false,
  PageController? controller,
  ScrollPhysics? physics,
  bool pageSnapping = true,
  void Function(int)? onPageChanged,
  List<Widget> children = const <Widget>[],
  DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  bool allowImplicitScrolling = false,
  String? restorationId,
  Clip clipBehavior = Clip.hardEdge,
  ScrollBehavior? scrollBehavior,
  bool padEnds = true,
})

As you can see in the constructor there are many different parameters we can tweak within the page view.

Let's see each of them one by one.

Scroll Direction
As the name suggests it is the direction in which we want our page view to scroll. Example Horizontal, Vertical.

Reverse

This is a Boolean value that reverses the scroll direction if set to true and default if false.

Controller

The controller is a Page Controller which we can use to change the behavior of page view as per our requirements like in List view.

Physics

Physics defines the scroll behavior of the page view. There are multiple options like

NoScrollPhysics
BouncyScrollPhysics
and many other

Page Snapping

This is also a boolean value which is when true the page will automatically drag to fit the screen while scrolling and if set false then the page will stop in between.

onPageChange

onPageChange is a function callback with one int parameter. This function is called whenever the page is changed in the page view. The int parameter represents the index of the page.

Here we will show a snack bar with the index of the page whenever the page changes in page view.

 onPageChanged: (int) {
        ScaffoldMessenger.of(context)
            .showSnackBar(SnackBar(content: Text("Page $int")));
      },

Children

Children are the list of widgets that are to be shown in the page view.

 children: [
        Container(
          color: Colors.amberAccent,
        ),
        Container(
          color: Colors.red,
        ),
        Container(
          color: Colors.blue,
        ),
        Container(
          color: Colors.green,
        )
      ],

drag start behavior (from flutter docs)

Determines the way that drag start behavior is handled.

If set to [DragStartBehavior.start], scrolling drag behavior will begin at the position where the drag gesture won the arena. If set to [DragStartBehavior.down] it will begin at the position where a down event is first detected.

In general, setting this to [DragStartBehavior.start] will make drag animation smoother, and setting it to [DragStartBehavior.down] will make drag behavior feel slightly more reactive.

By default, the drag start behavior is [DragStartBehavior.start].

allowImplicitScrolling

This is also a Boolean field that has no effect on normal users. It will be useful when the user is using the app via accessibility.

Controls whether the widget's pages will respond to [RenderObject.showOnScreen], allowing for implicit accessibility scrolling.

With this flag set to false, when accessibility focus reaches the end of the current page and the user attempts to move it to the next element, the focus will traverse to the next widget outside of the page view.

With this flag set to true, when accessibility focus reaches the end of the current page and the user attempts to move it to the next element, the focus will traverse to the next page in the page view.

restorationId

Restoration ID to save and restore the scroll offset of the scrollable.

If a restoration id is provided, the scrollable will persist its current scroll offset and restore it during state restoration.

The scroll offset is persisted in a [RestorationBucket] claimed from the surrounding [RestorationScope] using the provided restoration ID.

clipBehavior

clipBehavior is the parameter that defines what to do when the content of the page view goes outside of its boundary. There are multiple options available for clips like

1.Clip.antiAlias

2.Clip.antiAliasWithSaveLayer

3.Clip.hardEdge

ScrollBehavior

Scroll behavior is used to define the scroll behavior when the page view is at the start or bottom. As you can see in android we see a glowing light when we are at the end of the list.

padEnds

Whether to add padding to both ends of the list.

If this is set to true and [PageController.viewportFraction] < 1.0, padding will be added such that the first and last child slivers will be in the center of the viewport when scrolled all the way to the start or end, respectively.

If [PageController.viewportFraction] >= 1.0, this property has no effect.

This property defaults to true and must not be null.

Instagram Reels clone

we will make a reels screen clone only the UI part and instead of video, we will use here images to make it less complex.

First, we want to add the widget on top of the page so we need to use a stack.

First, let's create the bottom user name and description of the reels screen.
For this, we will use a Row to add a user image and name.

Row(
      children: const [
        CircleAvatar(
          backgroundColor: Colors.blue,
          radius: 20,
        ),
        SizedBox(
          width: 20,
        ),
        Text(
          "Name of user",
          style: TextStyle(color: Colors.white),
        ),
      ],
    );

Then we will add this row into a column that contains the description of the video and also add some padding to it.

Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisSize: MainAxisSize.min,
            children: const [
              CircleAvatar(
                backgroundColor: Colors.blue,
                radius: 20,
              ),
              SizedBox(
                width: 20,
              ),
              Text(
                "Name of user",
                style: TextStyle(color: Colors.white),
              ),
            ],
          ),
          const Text(
                "This is the very long description of the videos which has many lines This is the very long description of the videos which has many lines This is the very long description of the videos which has many lines This is the very long description of the videos which has many lines",
overflow: TextOverflow.ellipsis,
            softWrap: true,
            maxLines: 2,
            style: TextStyle(color: Colors.white),
          ),
        ],
      ),
    );

Now you can see a render overflow error, this is because the text of the description does not have a horizontal bound.

Before solving this let's add the buttons of like and share on the right side. Just add the new button column and add the previous column in a row. Here I am not using the exact buttons icons that are used in reels.

class Buttons extends StatelessWidget {
  const Buttons({Key? key}) : super(key: key);
@override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.heart_broken_outlined,
              color: Colors.white,
            )),
        IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.message_outlined,
              color: Colors.white,
            )),
        IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.share,
              color: Colors.white,
            )),
      ],
    );
  }
}

Add this to the previous row. Now if we remove the description text for some time our UI will look like this.

Now bring back the description and wrap both the child of row into flex and give it the ratio of 8 and 1.

Now the overall code looks like this.

class SinglePage extends StatelessWidget {
  const SinglePage({Key? key}) : super(key: key);
@override
  Widget build(BuildContext context) {
    return Stack(children: [
      Container(color: Colors.red),
      Align(
        alignment: Alignment.bottomLeft,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Flexible(
                flex: 8,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: const [
                        CircleAvatar(
                          backgroundColor: Colors.blue,
                          radius: 20,
                        ),
                        SizedBox(
                          width: 20,
                        ),
                        Text(
                          "Name of user",
                          style: TextStyle(color: Colors.white),
                        ),
                      ],
                    ),
                    const Text(
                      "This is the very long description of the videos which has many lines This is the very long description of the videos which has many lines This is the very long description of the videos which has many lines This is the very long description of the videos which has many lines",
                      overflow: TextOverflow.ellipsis,
                      softWrap: true,
                      maxLines: 2,
                      style: TextStyle(color: Colors.white),
                    ),
                  ],
                ),
              ),
              const Flexible(flex: 1, child: Buttons())
            ],
          ),
        ),
      )
    ]);
  }
}
class Buttons extends StatelessWidget {
  const Buttons({Key? key}) : super(key: key);
@override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.heart_broken_outlined,
              color: Colors.white,
            )),
        IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.message_outlined,
              color: Colors.white,
            )),
        IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.share,
              color: Colors.white,
            )),
      ],
    );
  }
}

And the UI looks like this.

Now just we have to add this single page into page view and give random colors to the background.

Final code

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
  HomeScreen({Key? key}) : super(key: key);
  final controller = PageController();
  @override
  Widget build(BuildContext context) {
    return PageView(
      controller: controller,
      scrollDirection: Axis.vertical,
      padEnds: false,
      children: const [
        SinglePage(
          color: Colors.red,
        ),
        SinglePage(
          color: Colors.green,
        ),
        SinglePage(
          color: Colors.yellow,
        ),
        SinglePage(color: Colors.amber),
        SinglePage(
          color: Colors.purple,
        ),
      ],
    );
  }
}
class SinglePage extends StatelessWidget {
  const SinglePage({
    Key? key,
    required this.color,
  }) : super(key: key);
  final Color color;
  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Container(color: color),
      Align(
        alignment: Alignment.bottomLeft,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Flexible(
                flex: 8,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: const [
                        CircleAvatar(
                          backgroundColor: Colors.blue,
                          radius: 20,
                        ),
                        SizedBox(
                          width: 20,
                        ),
                        Text(
                          "Name of user",
                          style: TextStyle(color: Colors.white),
                        ),
                      ],
                    ),
                    const Text(
                      "This is the very long description of the videos which has many lines This is the very long description of the videos which has many lines This is the very long description of the videos which has many lines This is the very long description of the videos which has many lines",
                      overflow: TextOverflow.ellipsis,
                      softWrap: true,
                      maxLines: 2,
                      style: TextStyle(color: Colors.white),
                    ),
                  ],
                ),
              ),
              const Flexible(flex: 1, child: Buttons())
            ],
          ),
        ),
      )
    ]);
  }
}
class Buttons extends StatelessWidget {
  const Buttons({Key? key}) : super(key: key);
@override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.heart_broken_outlined,
              color: Colors.white,
            )),
        IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.message_outlined,
              color: Colors.white,
            )),
        IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.share,
              color: Colors.white,
            )),
      ],
    );
  }
}

Final UI

Dismissible widget: Slide to delete in Flutter

Aakashp — Thu, 24 Mar 2022 17:58:08 +0000

Hello, readers welcome back to another article. Hope you all are doing great. So in this article, we will see how we can delete any item from a list view just like in the Gmail app.

First, let's quickly create a list view with 10 items. Now to make the list items delete on sliding left or right just wrap them in a widget called Dismissible. And there is onDismissed function which is called when the item is removed from the list. write your logic to delete the data from a database or local storage on items deleted from the list.

Constructor of Dismissible
Dismissible({
  required Key key,
  required Widget child,
  Widget? background,
  Widget? secondaryBackground,
  Future<bool?> Function(DismissDirection)? confirmDismiss,
  void Function()? onResize,
  void Function(DismissUpdateDetails)? onUpdate,
  void Function(DismissDirection)? onDismissed,
  DismissDirection direction = DismissDirection.horizontal,
  Duration? resizeDuration = const Duration(milliseconds: 300),
  Map<DismissDirection, double> dismissThresholds = const <DismissDirection, double>{},
  Duration movementDuration = const Duration(milliseconds: 200),
  double crossAxisEndOffset = 0.0,
  DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  HitTestBehavior behavior = HitTestBehavior.opaque,
})

Now let's see what more we can do with this widget. Let us explore each attribute of the dismissible widget one by one. In the dismissible widget, the keyis the required attribute because it uses a key of each item in the list to manage and update the UI after any item is dismissed.

Child: You can guess from the name this is the child widget of this widget.

Background and Secondary background

The background is the widget that will be seen when the list item is being dismissed. For example, if you want to delete the data then you can show a container with red color like this.

Dismissible(
            key: Key(index.toString()),
            background: Container(color: Colors.red),
            onDismissed: (direction) {},
            child: Card(
              child: ListTile(
                title: Text("this is $index item"),
              ),
            ),
          );

Similarly, the secondary background is the other background that will be shown on the item being dismissed. If you dismiss the item to the right then you can see the background but when you dismiss the item to left you can see the secondary background. For secondary background to work background should not be null.

And to make it look more beautiful you can also add an icon to the container like this.

background: Container(
              color: Colors.red,
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: const Icon(
                Icons.delete,
                color: Colors.white,
              ),
              alignment: Alignment.centerLeft,
            ),
secondaryBackground: Container(
              color: Colors.green,
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: const Icon(
                Icons.archive,
                color: Colors.white,
              ),
              alignment: Alignment.centerRight,
            ),

direction

Direction is the direction in which you want the widget to be dismissed. Horizontal or vertical.

ondismissed

This function is called when you dismiss any item from the list. You can use this function to modify the data. For example, if the user removed any item from the list then you can delete that from the database in this function. This function has one parameter of direction which tells in which direction the user had dismissed the item based on that you can perform the actions.

onDismissed: (direction) {
              if (direction == DismissDirection.startToEnd) {
                print("Item deleted");
                //your code to delete item from database or local storage
              } else if (direction == DismissDirection.endToStart) {
                print("item archived");
                //your code to move item to archive
              }
            },

confirmdismis

Confirm dismiss is the function that will be called when the item is dismissed. It is used to confirm the action. This function also has dismissed direction parameter to check in which direction the user had dismissed the widget. For example, we can check if the direction right then shows a dialog to the user to delete an item, and if the direction is left then show a dialog to archive the item like in the Gmail app.

confirmDismiss: (direction) async {
              if (direction == DismissDirection.startToEnd) {
                bool dismiss = false;
                await showDialog(
                    context: context,
                    builder: (context) {
                      return AlertDialog(
                        title: const Text("Are you sure you want to delete the item"),
                        actions: [
                          TextButton(
                              onPressed: () {
                                dismiss = true;
                                Navigator.pop(context);
                              },
                              child: const Text("Yes")),
                          TextButton(
                              onPressed: () {
                                dismiss = false;
                                Navigator.pop(context);
                              },
                              child: const Text("No")),
                        ],
                      );
                    });
                return dismiss;
              } else if (direction == DismissDirection.endToStart) {
                //similar for archiving item
                //show dailog to confirm archive item on sliding on left side
              }
            },

DismissDirection.startToEnd is from right side to left side and DismissDirection.endToStart is from left side to right side dismiss.

onresize and resizeduration

So when you dismiss the widget the item size that you had dismissed is reduced slowly. Resize duration is the duration in which the item should be removed from the list after dismissal. and onresize function is called when the item is being shrunk.

Dismissible(
            key: Key(index.toString()),
            background: Container(
              color: Colors.red,
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: const Icon(
                Icons.delete,
                color: Colors.white,
              ),
              alignment: Alignment.centerLeft,
            ),
            secondaryBackground: Container(
              color: Colors.green,
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: const Icon(
                Icons.archive,
                color: Colors.white,
              ),
              alignment: Alignment.centerRight,
            ),
            onResize: () {
              print("resized");
            },
            resizeDuration: Duration(seconds: 5),
            child: Card(
              child: ListTile(
                title: Text("this is $index item"),
              ),
            ),
          );

By default, the resize duration is 300 milliseconds. And if you give null in resize duration then onresize function will not be called and items will not be shrunk from the list.

onResize: () {
              print("resized");
            },
resizeDuration: null,

onupdate

on update is a function that is called every time when you drag the widget. it has a parameter called details which give details like direction, previous reached and currently reached state of drage.

previous reached and reached are boolean value which tells if the drag has passed the threshold for an item to be dismissed or not. Like when you drag the item and if it reached center(assuming) then the current state will be true and the previous state will be false. You can understand better from the image below.

dismiss thresholds

As seen in the above image we can give the threshold at which the user leaves the hand and the item will be dismissed. DismissTreshold is a MAP of threshold for each dismiss direction. You can give different thresholds for different directions.

dismissThresholds: {
              DismissDirection.startToEnd: 0.5,
              DismissDirection.endToStart: 0.1
            },

movementDuration

This is the duration the widget takes to slide away from the screen.

Dismissible(
            key: Key(index.toString()),
            background: Container(
              color: Colors.red,
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: const Icon(
                Icons.delete,
                color: Colors.white,
              ),
              alignment: Alignment.centerLeft,
            ),
            secondaryBackground: Container(
              color: Colors.green,
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: const Icon(
                Icons.archive,
                color: Colors.white,
              ),
              alignment: Alignment.centerRight,
            ),
            movementDuration: Duration(seconds: 10),
            child: Card(
              child: ListTile(
                title: Text("this is $index item"),
              ),
            ),
          );

crossAxisEndOffset

This value defines the offset the widget should move in cross-axis while being dismissed. If dismissal direction is horizontal and the value of offset is positive it moves downward and if negative it moves upward.

dragStartBehavior(from documentation)

Determines the way that drag start behavior is handled.

If set to [DragStartBehavior.start], the drag gesture used to dismiss a dismissible will begin at the position where the drag gesture won the arena. If set to [DragStartBehavior.down] it will begin at the position where a down event is first detected.
In general, setting this to [DragStartBehavior.start] will make drag animation smoother, and setting it to [DragStartBehavior.down] will make drag behavior feel slightly more reactive.
By default, the drag start behavior is [DragStartBehavior.start].

behavior

How to behave during hit tests.This defaults to [HitTestBehavior.opaque].

This definition is from the documentation and I have no idea about what it is, if you know what is hit test behavior please let me know.

If you want to add more options like multiple actions on sliding the item then you can use this plugin also.
flutter_slidable
If you liked this article then you can follow me for more stuff like this and if you don't like anything then also feel free to tell me.

Why column wrapped inside the center is not centered vertically in flutter?

Aakashp — Fri, 11 Mar 2022 11:10:56 +0000

Hello readers, welcome back to another article. If you are a beginner flutter developer and making apps with flutter then you may probably have already used the column and row widgets. You may also have got into a situation where you want to center the column or row widget.

So whenever you center a column or a row by wrapping it inside the center widget then you may have seen that the column widget is not centered vertically it is only centered horizontally.

Similarly, with the row widget, it is not centered horizontally it’s only centered vertically so why is this happening what is the reason that the column and row wrapped inside the center are not showing on the center of the screen. so in this article, we will see an attribute of both column and the row responsible for this behavior.
Let's first try to see how another widget behaves when we add it into the center widget’s child. We are wrapping a button inside the center.

Center(
      child: ElevatedButton(
        onPressed: () {},
        child: const Text("Button"),
      ),
    );

And here we can see the button is centered both horizontally and vertically.

Now let's try the same with the column. As you can see below in the image there are three buttons in the column and the column is only centered horizontally and not vertically. Similarly, the row is only centered vertically not horizontally.

Center(
        child:Column(
          children: [
            ElevatedButton(
              onPressed: () {},
              child: const Text("Button"),
            ),
            ElevatedButton(
              onPressed: () {},
              child: const Text("Button"),
            ),
            ElevatedButton(
              onPressed: () {},
              child: const Text("Button"),),]),),

So what's wrong here? Why is this happening? Here the problem is the size of both widgets. To understand better let's wrap the column inside the container and give it a background color to see how much space it's taking.

Center(
        child: Container(
          color:Colors.red,
          child: Column(
            children: [
              ElevatedButton(
                onPressed: () {},
                child: const Text("Button"),
              ),
              ElevatedButton(
                onPressed: () {},
                child: const Text("Button"),
              ),
              ElevatedButton(
                onPressed: () {},
                child: const Text("Button"),
              ),],),),),

Here you can see the space covered in red color is the space taken by the column. So why the column is taking full-height space? Because when you see at the constructor of column widget there is an attribute called mainAxisSize. And for the column, the main axis is vertical, and by the default value of mainAxisSize is set to MAX. so if we change mainAxisSize to min our problem is solved.

Center(
        child: Container(
          color:Colors.red,
          child: Column(
            mainAxisSize:MainAxisSize.min,
            children: [
              ElevatedButton(
                onPressed: () {},
                child: const Text("Button"),
              ),
              ElevatedButton(
                onPressed: () {},
                child: const Text("Button"),
              ),
              ElevatedButton(
                onPressed: () {},
                child: const Text("Button"),
              ),
            ],
          ),
        ),
      ),

Now you can see the column is taking only as much space as it required. Similarly happens with the row but the difference is the main axis of the row is horizontal so it takes space horizontally.
And that's all in this article if you want to get more article like this then you can follow me

How to return data from the screen in flutter

Aakashp — Fri, 25 Feb 2022 13:52:12 +0000

Hello, readers welcome back again to another blog. In the previous blog, we have seen how to pass the data from the first screen to the second screen but sometimes we also need to pass the data from the second screen to the first screen. So today we will see how we can do that in flutter.

Before starting if you had not seen the previous pard I will recommend first reading that.

In the previous article we saw that to push a screen we use Navigator.push() function. But when you will see the return type of the function it returns Futture where T is generic, which means we can put any object in place of T.

Future<T?> push<T extends Object?>(BuildContext context, Route<T> route)

Here T is the type of data that we are expecting to return from the screen.

As this returns a future we now need to put await to stop and wait until the second screen is poped and we get our data.

Now in the second screen, we can pop the screen using the function Navigator.pop(). Similarly in this function also there is a generic type T which tells the type of data we want to return. And this function has an optional field of type T, the data we want to return.

void pop<T extends Object?>(BuildContext context, [T? result])

Let's understand this with an example

We will create a button on the first screen which on pressing the user will go to the second screen.

On the second screen, we will give the user three buttons to press. When the user presses any one of the buttons we will pop the screen and return the String data to the first screen with the message “user clicked the x button”.

And we will also check if the data is null or not on the first screen because the user may not click on any button and press the back button in this case the data returned by the second screen will be null.

First Screen

class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          ElevatedButton(
              onPressed: () async {
                String? result = await Navigator.push<String>(context,
                    MaterialPageRoute(builder: (context) {
                  return const SecondScreen();
                }));

                ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                    content: Text(result ?? "User doesn't press anything")));
              },
              child: const Text("Next Screen"))
        ],
      ),
    );
  }
}

Second Screen

class SecondScreen extends StatelessWidget {
  const SecondScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          ElevatedButton(
              onPressed: () {
                Navigator.pop<String>(context, "User pressed Button 1");
              },
              child: const Text("Button 1")),
          ElevatedButton(
              onPressed: () {
                Navigator.pop<String>(context, "User pressed Button 2");
              },
              child: const Text("Button 2")),
          ElevatedButton(
              onPressed: () {
                Navigator.pop<String>(context, "User pressed Button 3");
              },
              child: const Text("Button 3"))
        ],
      )),
    );
  }
}

Output

How to pass data across the screen in a flutter app.

Aakashp — Tue, 01 Feb 2022 06:19:16 +0000

Hello readers, welcome again to another blog. So recently I was creating a flutter app and I need to pass the data from one screen to another screen. And if you are also a beginner in flutter development then you may also need to know how to pass data from one screen to other. When I searched, I got two ways of passing data from one screen to the other in flutter. Let's see both of them one by one.

Before that, we need to create a situation in which we send data from one screen to another. let's say we have a textbox on one screen which takes the name of the user and the user press on login. After which the user will be directed to the next screen in which the “Welcome username” message will be displayed.

In this, we will first take the name of the user on the first screen and then pass the name on the second screen to show the welcome message.

Two ways I know of passing data are :

Passing in the constructor of the new class
Passing in route settings

Passing in constructor

Let's see how we can use the constructor of the second screen to pass the name of the user from the first screen.

class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        width: 300,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const TextField(
                decoration: InputDecoration(
              hintText: "Enter your Name",
              labelText: "Name",
              border: OutlineInputBorder(),
            )),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(onPressed: () {}, child: const Text("Login"))
          ],
        ),
      ),
    );
  }
}

This is the code for the FirstScreen class. There is just a Column widget that has a TextField to take the input from the user and an ElevatedButton to go to the next screen.

Now let's see the code of the second screen class. Below in the constructor, we have a String field called name which we will use to pass the value from the first screen to the second screen on button press.

class SecondScreen extends StatelessWidget {
   const SecondScreen(this.name, {Key? key}) : super(key: key);
  final String name;
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Now let's create a text editing controller to read the value of the text field and also set the onPressed function of the login button. And also display a text widget on the second screen. And at last, the whole code will look like this.

class FirstScreen extends StatelessWidget {
  FirstScreen({Key? key}) : super(key: key);
final TextEditingController controller = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        width: 300,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(
                controller: controller,
                decoration: const InputDecoration(
                  hintText: "Enter your Name",
                  labelText: "Name",
                  border: OutlineInputBorder(),
                )),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
                onPressed: () {
                  String name = controller.text;
         Navigator.push(context, MaterialPageRoute(
         builder: (context) => SecondScreen(name)));
                },
                child: const Text("Login"))
          ],
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen(this.name, {Key? key}) : super(key: key);
final String name;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Welcome $name"),
      ),
    );
  }
}

If you want you can also make the name field in the second screen optional argument by putting it inside the square bracket and showing some default value if the name is NULL.

Output:

Passing in Route settings

Now that you have seen how to pass data with the help of a constructor it is similar to passing the data from route but the only difference is we can pass any type of data from route settings. Let's see this with an example.

When we push a screen with Navigator.push we give it a page route. And inside that route, we can also pass data.

Navigator.push(context, MaterialPageRoute(
                        builder: (context) => SecondScreen(name),
                        settings: RouteSettings(arguments: name)));

here we have passed the name inside the arguments of RouteSettings.

And to get the data on the second screen we use modelroute. You will get the data as the Object? so you need to cast it to what data type you have sent from the first screen.

String name = ModalRoute.of(context)!.settings.arguments as String;

At last the overall code with route setting will look like this

class FirstScreen extends StatelessWidget {
  FirstScreen({Key? key}) : super(key: key);
final TextEditingController controller = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        width: 300,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(
                controller: controller,
                decoration: const InputDecoration(
                  hintText: "Enter your Name",
                  labelText: "Name",
                  border: OutlineInputBorder(),
                )),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
                onPressed: () {
                  String name = controller.text;
                      Navigator.push(context,
                      MaterialPageRoute(
                      builder: (context) => const SecondScreen(),
                      settings: RouteSettings(arguments: name)));
                },
                child: const Text("Login"))
          ],
        ),
      ),
    );
  }
}
class SecondScreen extends StatelessWidget {
  const SecondScreen({Key? key}) : super(key: key);
@override
  Widget build(BuildContext context) {
    String name = ModalRoute.of(context)!.settings.arguments as String;
    return Scaffold(
      body: Center(
        child: Text("Welcone $name"),
      ),
    );
  }
}

Reference: https://docs.flutter.dev/cookbook/navigation/passing-data

How to show progress indicator while loading Image.network() in Flutter

Aakashp — Sun, 23 Jan 2022 15:55:37 +0000

Hello readers, Recently Flutter is in trend and many users may be developing apps in flutter. And one of the basic widget in flutter is Image which is used almost in all app. So let's first see what is this Image Widget.

Image as you can guess by the name is used to show the image. Now this widget has 4 named constructors Image.assets(), Image.file(), Image.network(), Image.memory().

If you are a Flutter developer then you may already know what all these types do and what their use is. We will discuss Image. network().

Image.network() is used to show an image from the internet. You give this widget a URL and it will do all the magic of downloading and showing an image on the screen. Below is the constructor of the Image.network(). As you can see the first argument is src which is the URL of the image file. Other than that there are many other arguments but we will only focus on two frameBuilder, loadingBuilder.

Image Image.network(
  String src, {
  Key? key,
  double scale = 1.0,
  Widget Function(BuildContext, Widget, int?, bool)? frameBuilder,
  Widget Function(BuildContext, Widget, ImageChunkEvent?)? loadingBuilder,
  Widget Function(BuildContext, Object, StackTrace?)? errorBuilder,
  String? semanticLabel,
  bool excludeFromSemantics = false,
  double? width,
  double? height,
  Color? color,
  Animation<double>? opacity,
  BlendMode? colorBlendMode,
  BoxFit? fit,
  AlignmentGeometry alignment = Alignment.center,
  ImageRepeat repeat = ImageRepeat.noRepeat,
  Rect? centerSlice,
  bool matchTextDirection = false,
  bool gaplessPlayback = false,
  FilterQuality filterQuality = FilterQuality.low,
  bool isAntiAlias = false,
  Map<String, String>? headers,
  int? cacheWidth,
  int? cacheHeight,
})

Frame Builder and Loading Builder are the two optional function arguments. Let's see each of them and why are they used.

loadingBuilder: It is called while the image is being downloaded. Below is the description of loadingBuilder from the flutter docs.

A builder that specifies the widget to display to the user while an image is still loading.
If this is null, and the image is loaded incrementally (e.g. over a network), the user will receive no indication of the progress as the bytes of the image are loaded.
For more information on how to interpret the arguments that are passed to this builder, see the documentation on [ImageLoadingBuilder].

frameBuilder: Below is the description of frameBuilder from the Flutter docs.

A builder function responsible for creating the widget that represents this image.
If this is null, this widget will display an image that is painted as soon as the first image frame is available (and will appear to "pop" in if it becomes available asynchronously). Callers might use this builder to add effects to the image (such as fading the image in when it becomes available) or to display a placeholder widget while the image is loading.
To have finer-grained control over the way that an image's loading progress is communicated to the user, see [loadingBuilder].

In short, this function is called when the first frame of the image is built. This function deals with how to build the frames of an image.

Ok, now lots of theory let us see this in practice.
First, let's see how we use Image.network() usually.

Image.network(
        "https://images.unsplash.com/photo-1526666923127- b2970f64b422?q=1080&h=720")

We just give the URL of the image in its constructor. But the output of this may look like this. Suddenly the image appears when it got downloaded.

Now we will use loadingBuilder and frameBuilder to show circular progress indicator while the image is loading.

Center(
child: Image.network(
"https://images.unsplash.com/photo-1526666923127-b2970f64b422",
frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
return child;
},
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) {
return child;
} else {
return Center(
child: CircularProgressIndicator(),
);
}

While the image is being downloaded it will show the widget from the loading builder and when the download is completed it will show the widget from the frame builder.

In the loading builder, we are first checking if the progress is null or not. If it is null we directly return the child else we show the circular progress indicator. We can also show progress value by using the data from loadingProgress.

And after that frame builder will return the child which contains the actual image. You can also wrap the child inside some animation to make it look good.

You can also show loading by using a placeholder gif image or using the stack as shown here.
NOTE: There may be another method to achieve the same thing effectively, if you find anything wrong or better than this please let me know.

Host your WordPress site for free.

Aakashp — Sat, 08 Jan 2022 14:57:01 +0000

Hello readers,
Today most personal blog websites or Informative websites are running on WordPress. Even I was also using WordPress for my blog site. As WordPress requires a server we need to host the website on our machine or we can rent from providers like AWS and Google Cloud.

But as a fresh Blog Site, I don't think you need any computational power to just show a page to the user which contains just text and images. So today, I will show how you can host your WordPress site for free on Google's Firebase Hosting. And at last, I will also be talking about some Disadvantages of this.

Why do we need to do this?

First, let's talk about why are we doing this. Why do we need to convert our WordPress site to HTML?

One reason is it's free, We can host our site for free on Firebase without any monthly charges. I know nowadays clouds are very cheap but why to pay when you can get them for free. Firebase does charge after some monthly limit but if you have fewer visitors on your site then you can give it a try. So that's why this method is actually for those people who are just starting to write Blogs or make websites. As static websites do not require any backend server.

Lets Begin

We will use a tool called httrack. Download the tool from the website according to your Operating System.

Open the tool.
Run your local WordPress server or if you have your site hosted somewhere then skip this step.
Create a new project and select a folder to store files.

4.Enter the URL of your site in the tool to scan your whole website. If it's on a local server then enter localhost: port-number.

5.After that config some basic options like which site you want to skip or any file type you want to ignore by the tool.

6.After that hit NEXT and sit back and relax for a few minutes.

7.It depends on the size of your website home much time it will take to scan.

8.After finished scanning you can see your whole site in the folder you have selected at the beginning. And note that every page of your site is now HTML means it's static and you can upload or host it at any free web server like Firebase.

Cons

Now let's discuss some of the cons of this approach.

Cant monitor views and likes: First is we cannot monitor the views and the like on the blog page. As it is only a static site no computation or counting can be done we can just show the page to the user nothing more than that.

Cant have comments: We cannot have a comment section on our blog as there is no backend to store comments.

Difficult to maintain: It will be very hard to post a new article to your website as it requires publishing the article on your local site then scanning the site using this tool and then uploading it to the cloud.

At last, I will only recommend using this method if your site is not changing content for many months and you want to run your site for free.

Firebase For Beginner : #2 Authentication

Aakashp — Thu, 23 Sep 2021 12:07:26 +0000

This is the second Blog in the series of Firebase For Beginner.

If you have not already read the first part of it I will recommend to you please read the first part before reading this.
First Part

In the First part I had given the basic introduction to firebase its benefits and some features of firebase.

Now lets see one of the important feature of Firebase : Authentication.
Lets say you want to make a social media app or website, Then what is the First thing you need in your website?
Login or Signup right.

But if you want to implement login or signup feature by your own then it will take lot of time, it will require you to configure database, security, encryption and many other things.

But Don't worry firebase Authentication is here to help you.
Using authentication you don't have to configure anything. You have to just create a new firebase project and just tell firebase by which method you need to authenticate users, example by phone, email etc.

Steps to use Authentication in your project

1. Create a new firebase project

First goto Firebase and Create a new Project.
Select your server location.

2. Enable you authentication type

Goto Authentication

Select the ways you like to authenticate your users.
I am now just enabling login with email and pass.

3. Goto firebase authentication documentation to implement in your favourite language(Firebase Docs).

Creating New User (Android-Java)

First import the firebase and firebase AUTH dependencies.

dependencies {
    implementation platform('com.google.firebase:firebasebom:28.4.1')

    implementation 'com.google.firebase:firebase-auth'
}

Create FirebaseAuth object using getInstance method.

private FirebaseAuth mAuth;

// Initialize Firebase Auth
mAuth = FirebaseAuth.getInstance();
use createUserWithEmailAndPassword method to create a new user with the given email and password.
mAuth.createUserWithEmailAndPassword(email, password)
        .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
    @Override
    public void onComplete(@NonNull Task<AuthResult> task) {
        if (task.isSuccessful()) {
        // Sign in success, update UI with the signed-in     user's    information
            FirebaseUser user = mAuth.getCurrentUser();

          } else {
             // If sign in fails, display a message to the user.

             Toast.makeText(EmailPasswordActivity.this, "Authentication failed.",Toast.LENGTH_SHORT).show();

                }
            }
        });

Verifying User

Now lets see how to verify existing user with firebase auth.
Its very simple just you need to call a method.

mAuth.signInWithEmailAndPassword(email, password)
        .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
            @Override
            public void onComplete(@NonNull Task<AuthResult> task) {
                if (task.isSuccessful()) {
                    // Sign in success, update UI with the signed-in user's information

                    FirebaseUser user = mAuth.getCurrentUser();

                } else {
                    // If sign in fails, display a message to the user.
                 Toast.makeText(EmailPasswordActivity.this, "Authentication failed.",Toast.LENGTH_SHORT).show();

                }
            }
        });

Benefits of using Authentication

Now lets see what are the benefits of using firebase authentication instead of your own authentication system.

1.More Speed and Less Time

First and very important benefit of using firebase is speed to development.

Firebase Will increase your development speed of your project because you don't have to write any code for authentication or database you just have to create a object of firebase instance in your project and just use its authentication.

Due to which the time to market of your project will also reduce and you will be able to focus just main functionality of your project rather than doing things which are already implement.

2.Easy to Implement

The firebase authentication is easy to implement as compare to normal authentication system. As you have seen in above steps we have implemented authentication in just 2–3 steps.

3.Security

Another most important feature of firebase is its security. As you all known firebase is backed by google and security of google is top notch. You don't have to worry about the security of your app or your users accounts or data. Firebase will take care all of that for you.

Firebase uses different encryption algorithm to transfer the data so you don't need to implement the encryption and decryption of data by you own.

4.O AUTH(Login using Google, Facebook, Apple)

Firebase provides a features to login with Google, Facebook, Apple and many other without any API implementation of platform. You just need to enable the login method in firebase Authentication dashboard and you are good to go.

5.Initially free to use

If you are beginner or a student then you would not like to spend too much for just learning or testing. Firebase authentication is initially free for some limited no of users registration, so you can easily test and learn how it works.

Disadvantages of using Firebase Authentication

Every system has some pros and cons. No system is absolutely correct. Firebase Authentication has also some disadvantage let see them.

Vendor Lock-in
Don't work in country where google is banned
Limited query capabilities

When not to use authentication

We have seen what is firebase authentication what are its advantages and disadvantages now lets see when not to use the Firebase Authentication.

1.Very Big Project

If your project size is very big or you have lots of users or lots of data then you should not use firebase authentication. Because it will be very difficult to process that much data in firebase. And firebase don't allow to do much things on user Authentication.
But if your project size is small or small user base then definitely firebase Authentication is a good start.

2.Want to store data at own premises

If your app generates or store very important data which is very precious to you then you should not use firebase because firebase store data in googles servers. And if you don't want to store data in google server then you should not use firebase. But you can use it to store data which is not so important so that it will reduce the load on your server.

Conclusion

So this was the basic introduction to Firebase authentication, we have seen how to use firebase authentication to login user and create new user account. We have also discussed the advantages and disadvantages of using firebase. And at last we have also seen where not to use firebase.

So if you are a beginner then you should try firebase authentication in your project. It will save your lot of time.

Firebase For Beginner : #1 Introduction

Aakashp — Mon, 26 Jul 2021 10:43:48 +0000

Hello reader,
If you are a beginner developer then please read this , I will show you an amazing tool that will help you and your project to grow faster.
And it is very simple and no advance knowledge needed.
So if you are a beginner and are planning to develop an app which require database or storage or any server and you don't know any thing about server side programming then this is for you.

It's Google's Firebase!

Firebase is an amazing tool for your project. It provides lot of features for free and it will also reduce your time to code complex systems. Let say you want to develop an user login system then it will take a lot of time to develop. You have to check email address , check password, and also important thing is the security of users account and your system. But Firebase will do this for you in just few lines of code and few minutes.
Now lets see some advantages of using firebase.

Advantages of using Firebase

Easy to use

Firebase is the most easy tool to use. Its simple dashboard will help you to navigate and find things easily. Firebases clean UI is the thing which attracts the beginners. There is no cmd or no code to get started Its just GUI. In few click you can host a website ,create a database, create user authentication system.

High Security

Firebase is backed by Google And everybody knows the security of google. You don't need to secure your app you just focus on developing and firebase will take care of security. The data transfer is firebase is by default encrypted so you don't need to make or use an encryption algorithm And this is again one more advantage of firebase there fore developers prefer using it .

No downtime

If you are setting up your own server then you have to take care of lot of things and one of it is server crash or down for maintenance . If you are using firebase then there is almost no downtime it is available 24x7 and one again if do it by yourself it will cost hell lot of money and time.

Detailed Documentation

The documentation of firebase is so good that you have not to go anywhere or watch any tutorial. You can read documentation and understand everything about firebase its that simple.

Cross Platform

One of the important feature of firebase is that it is cross platform means it support almost every platform and almost every language. So you don't need to learn a new language for firebase.

Features of Firebase

1.Realtime database
2.Web hosting
3.Authentication
4.Messaging
5.Analytics

Conclusion

If you are a beginner in this field and want to experience how backend system works then firebase is a great start. Firebase is so easy you just need a google account and you are ready to go. You can launch you app within few minutes with firebase. And almost all features of firebase are free initially.

URL shortner using NodeJS and firebase

Aakashp — Thu, 22 Jul 2021 11:33:40 +0000

Hello Guys,
I will show you how you can make a simple url Shortner using Nodejs And firebase.

1 Create a project in firebase

First create a new project in firebase and give it a name what ever you like.

Now create a Realtime database in firebase and select any server you want.

Goto project settings and register your project as a web app.
After registering firebase will give config details of your app.

2 Creating Backend Using NodeJS and ExpressJs

Now open VS code and create a new folder
In that folder create a JavaScript file Backend.js and Firebase.js

We can also do it in single file but its good practice to separate different components of your app in different files.
Now first initialize you NPM and Download some dependencies.
Open terminal by pressing ctrl+shift+'

npm init
npm install express
npm install firebase

Now copy your firebase config details and create a new map in firebase.js file and paste it.
Now add this two lines at the top of firebase.js so that we can user firebase and realtime database.

var firebase = require("firebase/app");
require("firebase/database");

Now initialize firebase and export it so that we can use it in backend.js
And at last your firebase.js will look like this

var firebase = require("firebase/app");
require("firebase/database");

var firebaseConfig = {
    apiKey: "",
    authDomain: "urlshortner.firebaseapp.com",
    databaseURL: "https://urlshortner-rtdb.firebaseio.com",
    projectId: "urlshortner",
    storageBucket: "urlshortnerappspot.com",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
  };

  // Initialize Firebase
firebase.initializeApp(firebaseConfig);

const database = firebase.database();

module.exports = {firebase,database};

Now this is the backend.js file

const express = require('express')
var app = express()
const path = require("path");
const {firebase,database} = require("./firebase");



app.use(express.json());
app.use(express.urlencoded());
app.use(express.static(path.join(__dirname, 'views')));
app.set('view engine', 'ejs')

app.listen(5003, (err) => {
console.log("APPLICATION IS RUNNIG");
})

app.get('/', (req, res) => {

    res.render('index')

})
app.get('/favicon.ico', (req, res) => {

    res.status(404).send("");


});



app.post('/process', (req, res) => {
    console.log("post method")
const urlRegEx = "http|https?:\/\/(www\.)?[-a-zA-Z0–9@:%._\+~#=]{1,256}\.[a-zA-Z0–9()]{1,6}\b([-a-zA-Z0–9()@:%_\+.~#?&//=]*)";
var regEx = new RegExp(urlRegEx);
const longurl = req.body.longurl;

if (!longurl.match(regEx)) {
res.status(400).json({ message: "please enter valid url" });
return;
}

if (longurl.toString().length){
let shorturl =  (new Date()).getTime().toString(36);
addDatabaseEntry(shorturl, longurl);
res.status(200).json({
    longurl: longurl,
    shorturl: shorturl
})
}
})
app.get('/:shorturl', (req, res) => {
const url = req.params.shorturl;
database.ref().child("urls").child(url).get().then((snapshot) => {
if (snapshot.exists()) {
res.redirect(snapshot.val());
} else {
console.log("Wrong Url");
res.redirect('404');
}
}).catch((error) => {
console.error(error);
});
});
function addDatabaseEntry(shorturl, longurl) {
database.ref("urls/" + shorturl).set(longurl);
}

First 10 lines are the initialization of some packages. If you have some knowledge about http server then you will easily understand this code.

At first we are creating an http server at port 5003. Here we are only creating the Backend of the server . We are sending the long URL in the post request and then the server will verify if the URL is valid or not and if it is valid then it will generate a short URL for this long URL and store it in the database.

There are three main Functions in backend.js

1.addDatabaseEntry
2.Post request to generate short URL
3.Get request to redirect to long URL

addDatabaseEntry will take the long URL and short URL and store it in the database.

app.post will take a long URL and will first check if the URL is valid or not and if valid then it will create a short URL and add the entry to the database.

app.get will take the short URL from the user. if the URL is present in the database it will redirect the user to long URL and if URL is not present then it will give an error.
And that's all our URL shortner is ready. You can also get this code from my GitHub repository. Now lets give it some long URL.

GitHub - urlshortener

3 Testing

For testing I have created basic HTML page. If you want to see it you can get it on my GitHub.
Entering Long URL

Converted to short URL

Redirect to long URL