Category: Flutter

  • Text Form Field Flutter size, how to increase in web app

    How do we increase the size of the text form field size in a Flutter app? We need to increase the size because we’ve been building a Flutter Firebase, Provider web app where users write blogs. As a result, as an interface, on the screen users must give some inputs through the TextFormField. However we’re…

  • Flutter web 3.0 blog app with Firebase, Provider

    While building the Flutter web 3.0 blog app with Firebase and Provider, we have faced some challenges. Firstly, we cannot hard code the blog posts anymore.  Secondly, we have to assure that only the signed-in visitors will post their blogs.  Finally, we will not use the multi provider technique. Instead we will use the ChangeNotifierProvider…

  • Factory constructor Flutter : when to use

    Why do we need factory constructor in flutter? Moreover, when to use the factory constructor? Firstly, we have been building a web app with Flutter 3.0. As a result, now we can generate the same output on the web as we usually do in mobile. You may ask, could we not do that before? Before…

  • Flutter 3.0, What is New

    A few days ago Google announced the official release of Flutter 3.0. Let’s see what is new in Flutter 3. Firstly, with reference to mobile application development, there has not been a great change. Structurally what we have been doing, will continue to do. Certainly a change in here and there had taken place. In…

  • Flutter Hard Code in Web App

    Flutter hard code is just like any other hard code principle that we follow when we develop any flutter app. Hard code is something that we embed into our code. Neither it comes from any external source, nor we change the value on runtime. Right? Flutter hard code is no exception. For example, we’ve seen…

  • Multi provider flutter in Web App

    While building our web app, we face a challenge. Firstly, we need to merge multiple providers. To solve this issue we have used a multi provider.  As a result, it improves the readability of our code. Secondly, it reduces boilerplate code. Why? Because otherwise we have to nest multiple layers of providers which doesn’t sound…

  • 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. …