Category: Beginners

  • Flutter Work flow : Firebase, Provider Web App

    How should we organise our Flutter work flow? Certainly there are several aspects that we have to concentrate on. But the first two steps require our attention at present. Firstly, we need a good theme.  Secondly, we need to change screens. In short, we should be able to navigate from one page to the other.…

  • Flutter Data Provider : How to use in Flutter Web App

    We’ve building a flutter web app with Firebase, Firestore, and Provider. Before we start building the app, let’s try to understand how we can use the provider package. In addition, we can also have a look at the flutter data provider pattern. The flutter data provider primarily means how we can provide any type of…

  • Flutter Span Text, how it works in web app

    Firstly, a span of text in flutter is immutable. What does that mean? We can use them as a constant property. Secondly, the span of text represents a TextSpan object which we can style with the help of a TextStyle widget. Basically the TextSpan widget has the style property that expects the TextStyle widget.This style…

  • Selectable text Flutter : Firebase, Provider Web App

    In flutter text widget always plays an important role. For example, we can use different types of text widgets to get diverse results. Selectable Text is another text widget that allows us to style text. In addition, we can allow the users to select a portion of text. With a normal text widget we cannot…

  • Flutter web app : how to start with

    How to start with a Flutter web app? In this section we will build a few widgets and connect them first. Next, we will build our dynamic flutter web app on top of that. In our previous section we have seen how we can build progressive web applications (PWA), and single page applications (SPA) with…

  • Flutter Web : Flutter Firebase Firestore Provider Web App

    Is Flutter ideal for building a web app? We usually treat flutter as a software development kit to build mobile apps. Right?  And no doubt, flutter is one of the most popular tools for building mobile apps. As a result, the question remains.  Whether in the same vein can we use flutter for building a…

  • Animation in Flutter : Tiny Flutter Apps

    Do you want to implement a variety of animations? Flutter makes it easy to implement. However, animation in flutter looks the simplest when we use the animated text kit package. Let us try to understand what animation is first. Right? And after that, we will briefly take a look at how we can place different…

  • Flutter Sparkle animation : Tiny Flutter Apps

    Do you want to add sparkle animation in flutter? Certainly there are different ways to do that. But the easiest way to add the sparkle animation effect is the animated text kit package. When a text sparkles, how does it look?  Let’s take a look first. After that we will discuss how this sparkle animation…

  • Wave Animation in Flutter : Tiny Flutter Apps

    We can create wave animation in flutter using the animated text kit package. As a result, the text appears on the screen as a wave.  Although now wave animation in flutter seems so easy, yet in the past it was not so.  In earlier days of Animation, the main artist drew the key-frames. After that,…

  • Color fill Animation Flutter : Tiny Flutter Apps

    Flutter gives us plenty of opportunities to animate text. However, color fill animation acts in a different way.  With the help of the animated text kit package, we have added the fade transition effect, or, we can rotate the text. Basically, it helps us to fill a text with different colors.  For example, we have a text…

  • Flutter Text Effects : Add animation to Text

    How do we animate text in flutter? So that we can add effects to texts in flutter. In addition, can we get it in a simple way? Certainly there are different ways. But the simplest way to get the flutter text effects is, no doubt, using the animated text kit package. Before using the animated…

  • Scale Animation Flutter : Tiny Flutter Apps Series

    How to scale an animation in flutter? Let’s try to understand it first. When an animation has a lower bound and upper bound we can scale it. The animation reduces or increases in size according to a common scale. In short the scale animation starts small, but gets bigger. Meanwhile, at the end, it disappears.…

  • Cursor in Animation Flutter : Tiny Flutter Apps

    The cursor plays an important role in animation in flutter. Most importantly when we use the cursor in typing animation. For example, we have used typing animation in flutter before. When we animate a text in flutter, we can do it in several ways. We can add the fade transition effect, or, we can rotate…

  • Typing Animation Flutter : Tiny Flutter Apps

    What do we mean by typing animation in flutter? It’s a kind of animation that helps us to make the text to type in automatically, instead of just displaying right away. We have already seen different types of text animations.   Firstly, in this tiny flutter apps series, we have seen animation that rotates the text. …

  • Fade Animation Flutter : Tiny Flutter Apps series

    How can we use fade animation in flutter? Please don’t mix it up with the fade transition widget where a widget fades in and out. We will use the animated text kit to make a text fade in and fades out. We have been trying to build tiny flutter apps where we’ve been learning one…

  • Filter Images Flutter : Tiny Flutter Apps Step 1

    In our previous section we have discussed how we’re going to build different types of tiny flutter apps. In our first endeavour, we are going to filter images in flutter.  Let’s see how it works first. An image is worth a thousand words. Therefore, it will give us a clear picture. It will explain what…

  • Tiny Flutter Apps Examples that you want to master

    We’ve built a few Flutter apps already. Probably you have learned a few tips, and tricks out there. However, I’d like to introduce a new module where you will learn to build tiny Flutter apps. We’ll see the examples, test them in our own machines.  And, in addition, we’ll apply the knowledge later to build…

  • Flutter WebView : design TabBar, final step

    In our previous section we have seen how we can use Flutter WebView widget with TabBar. However, you’ve probably noticed that the TabBar design is not up to the mark. In addition, we cannot display the application’s title as we wanted to do. Therefore, in this section we will work on them.  Let’s see the…

  • Timer Flutter : How to countdown starts and ends

    Flutter has a Timer class that we can configure. As a result, we can either start it, stop it or resume it. When a timer in flutter works it actually starts a countdown. As we know, in many cases, we need a timer to start a countdown in a flutter app. We can see a…

  • Relation Flutter: CooKingKong App – Step 4

    What is relation? When we use the word, we mean connection between two or many persons. Now, it is true for relation in Flutter also. Why? Because, in Flutter we use many objects. Right? For that reason, these objects may have relations. Now, relation may be different. Firstly, It can be one to one object.…

  • Flutter navigation send data: CooKingKong App – Step 2

    We have been building a funny recipe app in Flutter. In the first part, we have built a categories page. But in a very simple way. Now we want to use Flutter navigation to send data. That means when user clicks a category, it takes her to that category page. As a result, she can…