DEV Community: Kuldeep Tarapara

5 Best Android launchers in 2024 (Free and Paid)

Kuldeep Tarapara — Wed, 10 Jan 2024 09:51:36 +0000

Looking for the best Android launchers? You've come to the right place! Smartphone manufacturers often fail to provide users with adequate customization options when it comes to Android, which is known for its customization capabilities. A reliable Android launcher comes in handy here.

Recently, I was looking for some Android launchers, and I've done my research and tried many Android launchers in my experiment. So, I should share the Android launcher that I find unique, reliable, and easy to use. I've also mentioned the source where I got the reference and put it to you. Let's get started!

It is possible to replace the current launcher on your smartphone with a custom launcher that adds various customization features and enhances the overall user experience. I'll introduce you to the best Android launchers in this guide.

1. Nova Launcher:

Nova Launcher is undoubtedly one of the best Android launchers. The launcher is one of the oldest on the Play Store that gave rise to other launchers.

The Nova Launcher is fast, highly customizable, and provides essential features like a customizable app drawer, icon pack support, home screen effects, and more. As soon as you set it up, you'll find it pales in comparison to other launchers.

You'll love Nova Launcher once you figure out how to customize it. In addition, Nova Launcher allows you to create backups and share them with others. It is also possible to import and apply another person's backup if they share theirs with you.

Grab it from here

2. Microsoft Launcher

You'll love Microsoft Launcher if you use Microsoft products. Normally, you would expect the home screen to look like Windows. But that's not true. Instead, this launcher offers a clean and simple interface.

It includes Microsoft Glance, Bing Search, and other Microsoft features. With Microsoft accounts, you can access all your Microsoft app data in the Glance feed.

In addition, as a launcher, you can customize various aspects of it, including icons, feeds, gestures, home screen layouts, docks, and more. Besides backing up and restoring your settings, you can also share them with someone or transfer them to a new device.

Grab it from here

3. Lawnchair

You can experience Pixel's UI on your Android phone with Lawnchair. It is an open-source launcher that offers Pixel Launcher features with additional customization.

A similar At a Glance widget can be found on Pixel phones in Lawnchair, which uses Material Design UI. It is possible to customize the icons, fonts, dock, app drawer, and more based on your preferences. A backup of your setup can also be exported and imported.

To download its latest version, you'll have to visit its website. Lawnchair 2 can be downloaded from the Play Store, but an older version can be found there. In addition to Lawnchair, you'll need Lawnfeed to display the Google feed on the left side of your home screen.

Grab it from here

4. Smart Launcher 6

With Smart Launcher 6, you will have access to a wide range of customization features with little or no limit. You can place items on your home screen without worrying about fitting them into a grid with this Android launcher.

In the app drawer, Smart Launcher automatically sorts apps into different categories, and you can create custom categories as well. The Icon Pack Studio tool from Smart Launcher allows you to take the icon options even further.

Aside from that, you also get all the other features such as dock/folder/app drawer customization, gestures, etc. Despite having many free features, Smart Launcher 6 requires a subscription to access additional features.

Grab it from here

5. Nothing Launcher

With two smartphones and a few accessories, Nothing Technologies recently entered the market. Like its name, it has a unique user interface. Carl Pei deserves credit.

It is not limited to Nothing devices, however. Nothing Launcher is used on its smartphones. If you want adequate customization options without getting overwhelmed by options, this is for you.

In addition to customizing the icons and home screen, Nothing also includes a set of widgets that match the look of Nothing's smartphones' wallpaper and icons.

Grab it from here

Choose wisely!!!

One of the best aspects of Android is its customization options, and launchers are one of them. Android users can use these launchers to make their devices more responsive.

Customizing Color in Flutter Theming with Light and Dark Modes

Kuldeep Tarapara — Tue, 30 May 2023 11:12:43 +0000

In Flutter theming there is a powerful technique that allows you to customize the visual appearance of your application to provide a consistent and engaging user experience. One common theming approach is implementing light and dark themes, enabling users to switch between color schemes based on their preferences or the surrounding environment.

By incorporating light and dark themes with custom colors in your Flutter web application development, you can create visually appealing interfaces that adapt seamlessly to different lighting conditions. This guide will explore how to implement light and dark themes in Flutter and demonstrate how to customize the color palette to match your app’s branding or design requirements. Let’s dive into the world of Flutter theming and discover how to bring a vibrant and dynamic look to your app quickly.

What is Flutter theming?

The theme is the generic styling element that will represent your application’s entire style, look, and feel. Whenever you want to alter the Flutter app theme, for example, from Flutter dark mode to Flutter light mode or vice-versa, this process is referred to as Flutter theming.

However, by implementing the Flutter theme Dark Light in projects, they will use the default App Theme and their default colors attribute. But in the live project, you are required t include the custom color for app branding.

Flutter theming with custom color: Step-by-Step Guide

For the successful integration with Flutter theming, you need to take care of the following points below:

Create Flutter project

Add the Riverpod package to the yaml file.

Step 1: Make a Light/Dark theme

Use ThemeData class and customize colors and the various properties dependent on needs. We have made one method for getting ThemeData based on the opted light or dark themes.

Based on the selected theme, we provide several values for scaffoldBackgroundColor, thumbColor, appBar Theme, listTile Theme, and bodycolor.

ThemeData getAppTheme(BuildContext context, bool isDarkTheme) {
  return ThemeData(
    scaffoldBackgroundColor: isDarkTheme ? Colors.black : Colors.white,
    textTheme: Theme.of(context)
        .textTheme
        .copyWith(
          titleSmall:
              Theme.of(context).textTheme.titleSmall?.copyWith(fontSize: 11),
        )
        .apply(
          bodyColor: isDarkTheme ? Colors.white : Colors.black,
          displayColor: Colors.grey,
        ),
    switchTheme: SwitchThemeData(
      thumbColor: MaterialStateProperty.all(
          isDarkTheme ? Colors.orange : Colors.purple),
    ),
    listTileTheme: ListTileThemeData(
        iconColor: isDarkTheme ? Colors.orange : Colors.purple),
    appBarTheme: AppBarTheme(
        backgroundColor: isDarkTheme ? Colors.black : Colors.white,
        iconTheme:
            IconThemeData(color: isDarkTheme ? Colors.white : Colors.black54)),
  );
}

Step 2: Make a provider for the theme state with Riverpod
River-pod will be used to control the app theme state. We will use StateProvider to save a bool value to control light or dark themes.

final appThemeProvider = StateProvider<bool>((ref) => false);
</bool>

Step 3: Utilize theme in the app

Since the river-pod is used in the project, MyApp must be wrapped in ProviderScope in order to access all providers across the app. MyApp implements ConsumerWidget, allowing us to obtain the WidgetRef object in the build method and use the ref variable to access any river-pod. The method getAppTheme(context, ref.watch(appThemeProvider)), which monitors changes to the app theme, updates the application as necessary.

class MyApp extends ConsumerWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return MaterialApp(
      title: 'Flutter Light/Dark Theme',
      debugShowCheckedModeBanner: false,
      theme: getAppTheme(context, ref.watch(appThemeProvider)),
      home: const MyHomePage(),
    );
  }
}

ref.read(appThemeProvider.notifier).value = state. When the switch state is changed from light/dark mood, we update the theme state in appThemeProvider.

Switch(
  activeColor: Colors.orange,
  onChanged: (value) {
    ref.read(appThemeProvider.notifier).state = value;
  },
  value: isDarkMode )

Step 4: Add custom color

It functions properly as long as all icons and text use the same color. We must develop an extension for the theme to utilize alternative colors for icons. Make a class, extend it with ThemeExtension, and add the required fields for customization.

class AppColors extends ThemeExtension<appcolors> {
  final Color? color1;
  final Color? color2;
  final Color? color3;
  const AppColors({
    required this.color1,
    required this.color2,
    required this.color3,
  });
  @override
  AppColors copyWith({
    Color? color1,
    Color? color2,
    Color? color3,
  }) {
    return AppColors(
      color1: color1 ?? this.color1,
      color2: color2 ?? this.color2,
      color3: color3 ?? this.color3,
    );
  }
  @override
  AppColors lerp(ThemeExtension<appcolors>? other, double t) {
    if (other is! AppColors) {
      return this;
    }
    return AppColors(
      color1: Color.lerp(color1, other.color1, t),
      color2: Color.lerp(color2, other.color2, t),
      color3: Color.lerp(color3, other.color3, t),
    );
  }
}
</appcolors></appcolors>
The theme may now be defined according to colours by adding this extension attribute to ThemeData in our creation method getAppTheme.

extensions: <themeextension<appcolors>>[
  AppColors(
    color1: isDarkTheme ? Colors.blue : Colors.blueGrey,
    color2: isDarkTheme ? Colors.pink : Colors.pinkAccent,
    color3: isDarkTheme ? Colors.yellow : Colors.limeAccent,
  ),
</themeextension<appcolors>
Create a new extension function that we may utilise for quickly retrieving custom colour.

AppColors colors(context) => Theme.of(context).extension<appcolors>()!;
</appcolors>
Simply utilizing colors(context), we may get these colours in the widget.color1. If we don’t specify the icon colour, listTileTheme will determine the colour for us.

ListTile(
    leading: Icon(Icons.chat_outlined, color: colors(context).color3),
    title: Text( "Help Center", style: Theme.of(context).textTheme.titleSmall),
 ),
ListTile(
    leading: const Icon(Icons.notifications),
    title: Text("Notification", style: Theme.of(context).textTheme.titleSmall),
),
Step 5 : Full Soure code
import 'package:flutter/material.dart';
AppColors colors(context) => Theme.of(context).extension<appcolors>()!;
ThemeData getAppTheme(BuildContext context, bool isDarkTheme) {
  return ThemeData(
    extensions: <themeextension<appcolors>>[
      AppColors(
        color1: isDarkTheme ? Colors.blue : Colors.green,
        color2: isDarkTheme ? Colors.pink : Colors.blue,
        color3: isDarkTheme ? Colors.yellow : Colors.red,
      ),
    ],
    scaffoldBackgroundColor: isDarkTheme ? Colors.black : Colors.white,
    textTheme: Theme.of(context)
        .textTheme
        .copyWith(
          titleSmall:
              Theme.of(context).textTheme.titleSmall?.copyWith(fontSize: 12),
        )
        .apply(
          bodyColor: isDarkTheme ? Colors.white : Colors.black,
          displayColor: Colors.grey,
        ),
    switchTheme: SwitchThemeData(
      thumbColor: MaterialStateProperty.all(
          isDarkTheme ? Colors.orange : Colors.purple),
    ),
    listTileTheme: ListTileThemeData(
        iconColor: isDarkTheme ? Colors.orange : Colors.purple),
    appBarTheme: AppBarTheme(
        backgroundColor: isDarkTheme ? Colors.black : Colors.white,
        iconTheme:
            IconThemeData(color: isDarkTheme ? Colors.white : Colors.black54)),
  );
}
@immutable
class AppColors extends ThemeExtension<appcolors> {
  final Color? color1;
  final Color? color2;
  final Color? color3;
  const AppColors({
    required this.color1,
    required this.color2,
    required this.color3,
  });
  @override
  AppColors copyWith({
    Color? color1,
    Color? color2,
    Color? color3,
  }) {
    return AppColors(
      color1: color1 ?? this.color1,
      color2: color2 ?? this.color2,
      color3: color3 ?? this.color3,
    );
  }
  @override
  AppColors lerp(ThemeExtension<appcolors>? other, double t) {
    if (other is! AppColors) {
      return this;
    }
    return AppColors(
      color1: Color.lerp(color1, other.color1, t),
      color2: Color.lerp(color2, other.color2, t),
      color3: Color.lerp(color3, other.color3, t),
    );
  }
}
</appcolors></appcolors></themeextension<appcolors></appcolors>

Code of our main screen:

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:light_dark_mode/provider%20/app_theme_provider.dart';
import 'package:light_dark_mode/utils/app_theme.dart';
void main() {
  runApp(const ProviderScope(child: MyApp()));
}
class MyApp extends ConsumerWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return MaterialApp(
      title: 'Flutter Light/Dark Theme',
      debugShowCheckedModeBanner: false,
      theme: getAppTheme(context, ref.watch(appThemeProvider)),
      home: const MyHomePage(),
    );
  }
}
class MyHomePage extends ConsumerWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    var isDarkMode = ref.watch(appThemeProvider);
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        leading: const Icon(Icons.arrow_back_ios_sharp),
        actions: const [
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 15.0),
            child: Icon(Icons.add_circle_outline),
          )
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        child: ListView(
          children: [
            CircleAvatar(
              radius: 60,
              backgroundColor: Colors.grey,
              child: Padding(
                padding: const EdgeInsets.all(1), // Border radius
                child: ClipRRect(
                    borderRadius: BorderRadius.circular(60),
                    child: Image.asset(
                      "assets/ic_profile.jpeg",
                      fit: BoxFit.fill,
                      width: 120,
                      height: 120,
                    )),
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 10, bottom: 60),
              alignment: Alignment.center,
              child: Text(
                "Testing User",
                style: Theme.of(context).textTheme.titleLarge,
              ),
            ),
            ListTile(
              leading: Icon(isDarkMode ? Icons.brightness_3 : Icons.sunny),
              title: Text(
                isDarkMode ? "Dark mode" : "Light mode",
                style: Theme.of(context).textTheme.titleSmall,
              ),
              trailing: Consumer(builder: (context, ref, child) {
                return Transform.scale(
                  scale: 0.7,
                  child: Switch(
                    activeColor: Colors.orange,
                    onChanged: (value) {
                      ref.read(appThemeProvider.notifier).state = value;
                    },
                    value: isDarkMode,
                  ),
                );
              }),
            ),
            ListTile(
              leading: Icon(Icons.grid_on_sharp, color: colors(context).color1,),
              title: Text(
                "Story",
                style: Theme.of(context).textTheme.titleSmall,
              ),
            ),
            ListTile(
              leading: Icon(Icons.settings, color: colors(context).color2),
              title: Text("Settings and Privacy",
                  style: Theme.of(context).textTheme.titleSmall),
            ),
            ListTile(
              leading: Icon(Icons.chat_outlined, color: colors(context).color3),
              title: Text(
                "Help Center",
                style: Theme.of(context).textTheme.titleSmall,
              ),
            ),
            ListTile(
              leading: const Icon(Icons.notifications),
              title: Text(
                "Notification",
                style: Theme.of(context).textTheme.titleSmall,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Conclusion

In conclusion, this blog aims to assist you in personalizing the Flutter app theme. Although we customized Colours in ThemeExtension for this blog, we may customize the value in any field. So that, Flutter theming is just one aspect; you can find several blogs on the Flutter framework.

Frequently Asked Questions (FAQs)

1. Why is a light theme preferable to a dark theme?

On the other hand, Light mode is uncomplicated and transparent. It is readable, clear, natural, and visually appealing. Information can be presented in the Light mode in a more precise visual design than in the Dark mode. Therefore, Apple’s marketing is the clearest example of how it efficiently uses Light mode to give the display an impression of pure clarity.

2. How do you use custom hex colors in Flutter Theming?

To use a custom hex color in Flutter, you can utilize the Color class and specify the hex color value preceded by 0xFF. So, for example, to use the hex color “#FFAABB,” you can define it as Color(0xFFAABB). This allows you to easily integrate custom hex colors into your Flutter application’s theme, widgets, or styles, providing precise control over the visual appearance.

3. What is color blend mode in Flutter Theming?

BlendMode blendMode. Then when drawing a shape or combining layers, use this mixed mode. The colors used as sources come from the shape being drawn, like Canvas – graphics drawn between the Canvas and a composite layer (drawPath) or layer.

How to Localize Your React Native App With Gridly

Kuldeep Tarapara — Mon, 08 May 2023 17:38:43 +0000

The importance of Localization for App Development

In today's digital world, competition to create top-quality mobile applications is more fierce than ever before. To impact your application, it has to be both practical and attractive but also easily accessible and relevant to a worldwide audience. This is where the concept of localization is essential.

It is tailoring the application to meet various cultures, markets, and languages. It's not only about translation. However, it also involves adapting features, designs and functionality to conform to different cultures' diverse preferences and norms. One tool that could greatly assist in adapting is Gridly, an agile software for managing localization designed to simplify adapting your application to various markets.

Introduction to Gridly

Gridly is a reliable and flexible localization platform that allows teams and developers to oversee and manage localizations and translations of their apps through a central location. Gridly is designed to work with different countries and languages, making it more straightforward for teams to work together and maintain consistency across multiple versions of an app. It's an essential instrument for any app developer trying to make their application universally accessible.

How Gridly Works?

Gridly is a fast-paced and flexible localization management system designed to ease converting digital products to various languages and cultures. It is a central tool that allows teams and developers to manage, store, and manage all their translations in one location to facilitate collaboration and ensure that the same translations are consistent across all product versions.

Gridly can be used with various languages and formats and integrated with multiple frameworks for developing apps and frameworks, making it an ideal solution for managing localization for every development project.

Gridly serves as a complete solution to manage localization projects. It lets you save the information, update, and manage all your translations in one location. It makes it much easier to monitor changes and keep uniformity. Here's a quick summary of the process:

Import your content Gridly lets you import content from multiple sources, including a CSV document, Google Sheets, or directly from your codebase. It supports different formats like XML, JSON, and YAML.
You can manage your translations. After your content has been imported, you can begin coordinating your translations. Gridly has users with a user-friendly interface. You can edit, add, or remove translations if needed.
Work with your team: Gridly fosters team collaboration through the ability of many users to collaborate on translations simultaneously. Additionally, it provides the ability to control version changes efficiently.
After you have completed your translations, it is easy to export them in the desired format and incorporate them into your program.

Set Up of the Gridly Grid

The process of setting the Gridly grid requires the following steps:

*1. Create a new grid. *

Begin by creating a brand new grid on Gridly's Gridly dashboard. This is where you'll handle all of your translations.

Follow these steps to create Grid in Gridly:

a. Login to your Gridly Account.

b. Click on the “ + Add Grid” button and select “Start from scratch” as we create a new grid.

c. Give your grid a specific name and choose your source language. I.e. en(English) and then your target language. I.e. ja(Japanese), fr(French), and sv(Swedish)

d. Remove all columns in other columns
e. Click on the “Create” Button

The new grid will look like this. Following these steps, you can create more grids according to your needs.

2. Change column properties

a. Click on the downward arrow key and then select the column properties.

b. Change the column Id to match the language code.
Note: This id will be used in code to change the language.

c. Repeat steps a and b for all the columns.

d. Select raw from the left side, Right click and then click “Delete record”. Delete all the records, likewise.

e. Click the “Manage column” button and make the record ID column visible.

3. Get the Grid API key and view the ID.

Configuring a React Native App Development Project

We are developing a React Native app. Gridly can be a crucial tool in coordinating the localization process. Here's how to configure it:

Create a new React Native app project.

Use the following command to create a new React native project.

# Create a project named localization-demo
- npx create-expo-app localization-demo 

# Navigate to the project directory
-cd localization-demo

# Start development server
-npx expo start

Install i18next dependencies

i18next
react-i18next
i18next-browser-languagedetector
i18next-gridly-backend

npm install i18next react-i18next @react-native-async-storage/async-storage

Configure Gridly

Once you install the dependencies. This requires a Gridly API key and view ID. Let’s build the app step by step.

In this example, we have used typescript, but you can also follow the same process for javascript.

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import AsyncStorage from "@react-native-async-storage/async-storage";
import demo from "./demo.json";

Import the required modules and dependencies, including i18n, initReactI18next, AsyncStorage, and demo.json.

const VIEW_ID = "tz8qosssrut37";
const API_KEY = "VVHfJDj4lVlAvs";

var myHeaders = new Headers();
myHeaders.append("Authorization", `ApiKey ${API_KEY}`);

Define constants VIEW_ID and API_KEY for Gridly authentication.

Warning: As we are creating a demonstration application, we have added api key and view key directly in the code, but we do not recommend this way in production deployment. For production deployment, either you should use Gridly read-only api key or you should store it in some secure way.

interface Cell {
 columnId: string;
 sourceStatus?: string;
 dependencyStatus?: string;
 value: string;
}


interface Item {
 id: string;
 cells: Cell[];
}


interface Translations {
 [key: string]: {
   [key: string]: string;
 };
}

Define an interface for a Gridly cell, an interface for a Gridly item, and an interface for translations.

Now execute the below command and store the output in i18n/demo.json

curl GET \
https://api.gridly.com/v1/views/{viewId}/records \
  -H 'Authorization: ApiKey {apiKey}'

You can find this from Gridly grid.

const fallback: Item[] = demo;

Define a fallback constant as demo data for when translation data cannot be retrieved from Gridly.

const convertToTranslations = (data: Item[]): Translations => {
 const translations: Translations = {};

 data.forEach((item: Item) => {
   item.cells.forEach((cell: Cell) => {
     if (!translations[cell.columnId]) {
       translations[cell.columnId] = {};
     }
     translations[cell.columnId][item.id] = cell.value;
   });
 });
 return translations;
};

Define a function called convertToTranslations that takes an array of Gridly items and returns an object of translations.

const getTranslations = async () => {
 let translations: Translations = {};
 let resData: Item[] = [];
 try {
   const response = await fetch(
     `https://api.gridly.com/v1/views/${VIEW_ID}/records`,
     {
       method: "GET",
       headers: myHeaders,
       redirect: "follow",
     }
   );
   if (response.ok) {
     resData = await response.json();
   }
   translations = convertToTranslations(resData);
 } catch (error) {
   const localTranslations = await AsyncStorage.getItem("translations");
   if (localTranslations) {
     translations = JSON.parse(localTranslations);
   } else {
     translations = convertToTranslations(fallback);
   }
 }
 return translations;
};

Define an async function called getTranslations that fetches the translation data from the Gridly view and returns the data as an object of translations. If the fetch fails, the function retrieves the data from AsyncStorage or falls back to the demo data.

i18n
 .use(initReactI18next)
 .init({
   lng: "en",
   compatibilityJSON: "v3",
   fallbackLng: "en",
   debug: true,
   interpolation: {
     escapeValue: false,
   },
   react: {
     useSuspense: false,
   },
 });

We have configured the i18n instance with these plugins and options. If you want to learn more about the initialization options, you can visit the i18next official docs. We have enabled debug mode, set English as the fallback language, and defined the backend options.

(async () => {
 const translations = await getTranslations();
 Object.keys(translations).forEach((key) => {
   i18n.addResources(key, "translation", translations[key]);
 });
 AsyncStorage.setItem(`translations`, JSON.stringify(translations));
})();

async function that retrieves the translations using the getTranslations function and adds them to the i18n library. It then stores the translations in AsyncStorage for later use

Add the i18n/i18n.ts file:

The final i18n.ts file will look like this.

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import AsyncStorage from "@react-native-async-storage/async-storage";
import demo from "./demo.json";



const VIEW_ID = "tz8qosssrut37";
const API_KEY = "VVHfJDj4lVlAvs";


var myHeaders = new Headers();
myHeaders.append("Authorization", `ApiKey ${API_KEY}`);


interface Cell {
 columnId: string;
 sourceStatus?: string;
 dependencyStatus?: string;
 value: string;
}


interface Item {
 id: string;
 cells: Cell[];
}


interface Translations {
 [key: string]: {
   [key: string]: string;
 };
}


const fallback: Item[] = demo;


const convertToTranslations = (data: Item[]): Translations => {
 const translations: Translations = {};


 data.forEach((item: Item) => {
   item.cells.forEach((cell: Cell) => {
     if (!translations[cell.columnId]) {
       translations[cell.columnId] = {};
     }
     translations[cell.columnId][item.id] = cell.value;
   });
 });
 return translations;
};


const getTranslations = async () => {
 let translations: Translations = {};
 let resData: Item[] = [];
 try {
   const response = await fetch(
     `https://api.gridly.com/v1/views/${VIEW_ID}/records`,
     {
       method: "GET",
       headers: myHeaders,
       redirect: "follow",
     }
   );
   if (response.ok) {
     resData = await response.json();
   }
   translations = convertToTranslations(resData);
 } catch (error) {
   const localTranslations = await AsyncStorage.getItem("translations");
   if (localTranslations) {
     translations = JSON.parse(localTranslations);
   } else {
     translations = convertToTranslations(fallback);
   }
 }
 return translations;
};


i18n
 .use(initReactI18next)
 .init({
   lng: "en",
   compatibilityJSON: "v3",
   fallbackLng: "en",
   debug: true,
   interpolation: {
     escapeValue: false,
   },
   react: {
     useSuspense: false,
   },
 });


(async () => {
 const translations = await getTranslations();
 Object.keys(translations).forEach((key) => {
   i18n.addResources(key, "translation", translations[key]);
 });
 AsyncStorage.setItem(`translations`, JSON.stringify(translations));
})();


export default i18n;

Translation

Original App.tsx file:

import { StyleSheet, Text, View, Button } from "react-native";


export default function App() {
 // List of the languages you want to support. Here value property is the column id we have added in Gridly grid in earlier step
 const languages = [
   { value: "en", name: "English" },
   { value: "ja", name: "Japanese" },
   { value: "fr", name: "French" },
   { value: "sv", name: "Swedish" },
 ];
 return (
   <View style={styles.container}>
     <View style={styles.buttContainer}>
       {/* Render button for all languages */}
       {languages.map((lng) => (
         <Button 
           key={lng.value} 
           title={lng.name} 
         />
       ))}
     </View>
     <Text>Hello from Gridly!</Text>
   </View>
 );
}


const styles = StyleSheet.create({
 container: {
   flex: 1,
   backgroundColor: "#fff",
   alignItems: "center",
   justifyContent: "center",
   gap: 100,
   padding: 20,
 },
 buttContainer: {
   flexDirection: "column",
   gap: 30,
 },
});

Here we have added a basic UI with a list of buttons for each language we support and one message that will be translated by clicking on any button.

Further, we will modify this code to localize all the text and add a language toggle.

Updated App.tsx

import { StyleSheet, Text, View, Button } from "react-native";
**import { useTranslation } from "react-i18next";
import i18n from "./i18n/i18n";**


export default function App() {
 **const { t } = useTranslation();**


 // List of the languages you want to support,
 const languages = [
   { value: "en", name: "English" },
   { value: "ja", name: "Japanese" },
   { value: "fr", name: "French" },
   { value: "sv", name: "Swedish" },
 ];
 return (
   <View style={styles.container}>
     <View style={styles.buttContainer}>
       {/* Render button for all languages */}
       {languages.map((lng) => (
         <Button
           key={lng.value}
           title={lng.name}
           **onPress={() => i18n.changeLanguage(lng.value)}
**         />
       ))}
     </View>
     <Text>
      **{t("description", "Hello from Gridly!")}**
     </Text>
   </View>
 );
}


const styles = StyleSheet.create({
 container: {
   flex: 1,
   backgroundColor: "#fff",
   alignItems: "center",
   justifyContent: "center",
   gap: 100,
   padding: 20,
 },
 buttContainer: {
   flexDirection: "column",
   gap: 30,
 },
});

Here we have imported the i18n instance created earlier. With the click of a button, we are changing the language using i18n.changeLanguage function. Next, we used the useTranslation hook to display a message that will automatically translate the news on the language change.

Next, add translations for all the languages.

Now go back to your application and try another language. The translated content for the selected language will be displayed.

Conclusion

Gridly is a platform that can be adapted for managing localization, enabling you to manage translations effortlessly. Communicate with your team and ensure consistency across different versions of your application. Its integration with the most well-known frameworks for developing apps like React Native further enhances its capabilities, making localization an integrated part of the development process.

If you're an app creator trying to expand your market and develop a truly global app, using a comprehensive localization tool like Gridly could be an exciting change. It's not just making your application accessible in multiple languages. It's also about adapting to local practices, standards, norms, and values. With Gridly, it's easy to achieve this.

You can find the source code here
Check out the live demo here

Flutter Form Validation: A Guide to Build a Form With Validation in Flutter

Kuldeep Tarapara — Fri, 28 Apr 2023 10:53:25 +0000

HTML plays an important role in creating the Form, and CSS is used for designing a layout. JavaScript is essential for validating the Form as these are helpful for the client side.

The data processing will be quite faster compared to the server-side validation. Many applications especially require users to enter the information in the text field. There are also many options available for easy login credentials with the email address and password combination.

These Forms must be in the correct Form before submitting the data to the server. It involves the complete client-side Form validations.

What Is Form Validation?

Accessing any popular website lets you easily find the registration Form. Normally, you could easily notice them for providing suggestions or feedback about the product or service. For example, when the user does not enter the data in a format, they will be notified with messages like Please enter phone numbers and more.

It is normally called validation, so data entered in the browsers and the web server can be easily checked for data. Validation will be done in the browser with the client-side validation. The validation that is done on the server side is called the server-side validation.

What Is Client-Side Validation?

The Client-side validation involves the initial check of the Form. These are also helpful for ensuring the user gets a good experience by easily catching invalid data on the client side.

The user could easily fix them straight away. There has been a noticeable delay in the server, which causes the trip of the server. These also involve the client side, enabling the user to fix the data.

Client-side validation is also not considered as an exhaustive security measure. Apps always perform major security checks on form-submitted data on the server and client sides.

Client-side validation will be quite an easier option to bypass. The malicious users could also send bad data to the server. Implementing server-side validation also allows us to ensure the data is secured in all attributes.

Methods For Building Form Validation

Client-side Form validation is helpful for ensuring the data submitted also matches a required set of Forms. Many processes are involved in providing you with the better accurate client-side Form validation. It is important to check whether the user’s information is valid to make the custom mobile app development easy to use and secure.

For example, the information can be processed when the user fills the form correctly. When the user submits the incorrect data, it will display a friendly error message letting the user know about it.

Creating A Form Using Globalkey

Normally, it is quite easier to create the Form using GlobalKey, and it is a completely safer option. The Form widget acts as the container in a grouping and validates the multiple Form fields. It can be easily identified Form as well as allows the secure validation

import 'package: flutter/material.dart';
// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
  const MyCustomForm({super.key}); 
@override 
MyCustomFormState createState() {
    return MyCustomFormState();
  }
}
// Define a corresponding State class.
// This class holds data related to the Form.
class MyCustomFormState extends State {
  // Create a global key that uniquely identifies the Form widget
  // and allows validation of the Form.
  //
  // Note: This is a `GlobalKey`,
  // not a GlobalKey.
  final _formKey = GlobalKey();

The element will be valid only when the:

An element matches:: valid CSS pseudo-class
Apply specific style to valid elements
If a user tries to send the data

When an element is invalid, then

An element matches::invalid CSS pseudo-class
The browser will block the Form when the user tries to send data

How To Add TextFormField With Validation Logic?

The Form has the same format, but there isn’t a way for users to easily access the text. It involves the TextFormField widget for extensively rendering material designs in the text fields.

These are also significant options for displaying validation errors even in all aspects. It is quite an efficient option for validating input by providing the validator() function in TextFormField.

For example, when the user text field is not valid, then the validator function will return to the string containing the error message. These involve the string function, which contains the notification about various attributes. The Validator will automatically return to the null when there are no errors.

TextFormField(
  // The validator receives the text that the user has entered. 
validator: (value) {
    if (value == null || value.isEmpty) {     
Return 'Please enter some text;
    }
    return null;
  },
),

How To Create A Button To Validate The Form?

Having the Form in the text field will significantly provide you with better options with the button. These also allow the user to submit information in a more significant manner easily.

For instance, if a user is looking to submit the Form, it is important to check whether it is Valid. The method will display the successful message when the text field has no content, so they would be displaying the error message.

ElevatedButton( 
onPressed: () {
    // Validate returns true if the Form is valid or false otherwise.
    if (_formKey.currentState!.validate()) {
      // If the Form is valid, display a snackbar. In the real world,
      //You'd often call a server or save the information in a database.     
ScaffoldMessenger.of(context).showSnackBar(
       const SnackBar(content: Text('Processing Data')),
      );
    }
  },
  child: const Text('Submit'),
),

FormState class also involves the validate() method. Normally, the validate() method can also be known as the validator() function.

Example

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State {
  var _formKey = GlobalKey();
  var isLoading = false;

  void _submit() {
    final isValid = _formKey.currentState?.validate();
    if (!isValid!) {
      return;
    }
    _formKey.currentState?.save();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Form Validation"),
        leading: Icon(Icons.filter_vintage),
      ),
      //body
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        //form
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              Text(
                "Form-Validation In Flutter ",
                style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
              ),
              //styling
              SizedBox(
                height: MediaQuery.of(context).size.width * 0.1,
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'E-Mail'),
                keyboardType: TextInputType.emailAddress,
                onFieldSubmitted: (value) {
                  //Validator
                },
                validator: (value) {
                  if (value!.isEmpty ||
                      !RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
                          .hasMatch(value!)) {
                    return 'Enter a valid email!';
                  }
                  return null;
                },
              ),
              //box styling
              SizedBox(
                height: MediaQuery.of(context).size.width * 0.1,
              ),
              //text input 
              TextFormField(
                decoration: InputDecoration(labelText: 'Password'),
                keyboardType: TextInputType.emailAddress,
                onFieldSubmitted: (value) {},
                obscureText: true,
                validator: (value) {
                  if (value!.isEmpty) {
                    return 'Enter a valid password!';
                  }
                  return null;
                },
              ),
              SizedBox(
                height: MediaQuery.of(context).size.width * 0.1,
              ),
              ElevatedButton(
                child: Text(
                  "Submit",
                  style: TextStyle(
                    fontSize: 24.0,
                  ),
                ),
                onPressed: () => _submit(),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Conclusion

Developing the Form is the most straightforward HTML validation feature that involves the FormState class. However, users can easily add this attribute and other elements and set matches for the UI pseudo-class. Thus, it will be equipped with each text field in the Form.

Building forms with validation is just one example of the many features that Flutter offers to help developers create robust and reliable applications. With its ease of use and flexibility, Flutter is quickly becoming a popular choice for mobile app development.

If you want to use Flutter to create a mobile application, hire Flutter developer from a reputed Flutter development company to guarantee you’ll get the most recent versions of the apps. Let’s work with our skilled programmers to create custom-focused, feature-rich applications.

Frequently Asked Questions (FAQs)

1. What is form validation?
It is a technical procedure where a web form verifies that the data entered by a user is accurate. Either the Form will notify the user that they made a mistake and must correct it before continuing, or the Form will be verified, and the user will be able to finish the registration process.

2. Why use form validation?
Ensure all relevant form data is filled out appropriately before sending it to the server. This process, known as client-side form validation, ensures that the data given complies with the specifications stated in the different form controls.

3. How do I validate the Form in Flutter?
In flutter form, the TextFormField has a validator method that is called to validate the user input. This method checks the validation and if it contains some error, it will return a string containing an error message to the user. Another way to validate the user input is to create a validation mixin to validate the user input.

How to Change AppBar Color in Flutter – A Beginner’s Tutorial

Kuldeep Tarapara — Tue, 11 Apr 2023 10:52:26 +0000

The AppBar is the most noticeable widget for users, and its background color is based on the colors specified in ThemeData. The Flutter AppBar widget is also widely utilized in numerous applications by Flutter developers. It contains a search field, page navigation buttons, or the page title. But, Flutter provides a specialized widget for this purpose, as it is frequently used.

AppBar is a built-in widget in Flutter that provides a top-level structure for the app. It typically contains the toolbar and other standard action buttons, such as a back button. It is highly customizable but can be replaced with other widgets, such as a scrollable AppBar, to provide a more flexible structure.

Alternatively, custom app bars can be created from scratch by these programmers. When you open the new page of the project you just created, you might notice that the color of the back button differs from what you had configured for the theme colors of your app.

AppBar In Flutter: An Overview

The AppBar is a toolbar placed at the top of your app. It’s a necessary component that can be found in almost all applications. It typically contains items like a leading, title, and actions. The AppBar is a widget, allowing it to incorporate other widgets.

For example, an AppBar with a log-out button is embedded inside. Flutter AppBar is an interactive element that adheres to Material Design standards. It is typically located at the top of the screen and can incorporate other widgets in its design.

How to Create AppBar In Flutter?

In Flutter, AppBar is part of Scaffold. The Scaffold is a widget that contains your application. It contains different widgets(parts), but the main ones are the AppBar, body, bottom navigation bar, and the floating button. We can say that the Scaffold is the container of the AppBar.

The AppBar widget can contain various toolbar widgets such as menu, action, and icon buttons. Here is the process of creating the AppBar widget:

Step 1: Generate a New Flutter Application:

To begin your project, open a terminal window and type the below command to create the project. After creating it, please navigate to the project folder and open it with your preferred text editor/IDE.

    `flutter create flutter_appbar_tutorial`

Step 2: Clear The Automated Generated Coding In Flutter App:

When working on a new project with Flutter, it is recommended to start by cleaning the main file in lib/main.dart. It involves removing all comments, deleting the counter button and associated code, and removing the title parameter of MyHomePage. Still, the goal is to have the code as simple as possible. Thus, Flutter generates a code that has a basic AppBar, only displaying text.

Step 3: Customization Scope In Appbar:

In this step, we will personalize the AppBar by changing its primary characteristics. Recall that Flutter functions using widgets, which can contain other widgets. The AppBar widget has three primary properties:

The leading which can take a widget,
The title can take a widget, and
The actions can take a list of widgets.

We will investigate this in more detail in the subsequent step!

Step 4: Generate AppBar Activity In Flutter

Our goal in this step is to recreate the increment button, as seen in the auto-generated code. In order to accomplish this purpose, it is necessary to make a variable in _MyHomePageState and write two functions to adjust the state variable, one to increase its value and one to decrease it.

int _counter = 0;
  // Add 1 to the `_counter`
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  // Remove 1 to the `_counter`
  void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }

Once the logic has been set up, we can focus on the application’s design. We can update the leading to display an icon of our choice and update the title text and the body to show the counter value as text. Then, we can add two buttons to the actions list using the IconButton widget. The first button will increment the counter’s value, and the second will decrease it.

return Scaffold(
      appBar: AppBar(
          // Update the `leading` to have a better design
          leading: Icon(Icons.accessibility),
          // Change the app name
          title: Text("Flutter Calculator"),
          actions: <widget>[Text("First action")]),
      body: Center(
        // Update the body with a Text widget
        // to display the counter value
        child: Text(
          '$_counter',
          style: TextStyle(fontSize: 50.0),
        ),
      ),
    );
</widget>

Finally, we can pass the two functions we created before as parameters of our onPressed properties.

actions: <widget>[
          // First button - decrement
          IconButton(
            icon: Icon(Icons.remove), // The "-" icon
            onPressed: _decrementCounter, // The `_decrementCounter` function
          ),
          // Second button - increment
          IconButton(
            icon: Icon(Icons.add), // The "+" icon
            onPressed: _incrementCounter, // The `_incrementCounter` function
          ), //IconButton
        ],
</widget>

Output

Change AppBar Color on Page Level In Flutter

You can alter the color of the app bar in Flutter by setting the backgroundColor property with the desired color. It will let you customize the styling of the AppBar. Let us explore the stepwise process to change the AppBar color, which Flutter developers use:

Step 1: Find the AppBar widget, usually located in your project directory’s lib/widgets folder.

Step 2: In the AppBar widget, use the backgroundColor argument to specify the desired background color. E.g., backgroundColor: Colors.deepPurpleAccent.

Step 3: To use the app, open it on your device and follow the instructions on the screen.

AppBar(
 centerTitle: true,
 title: Text('Hii'),
 backgroundColor: Colors.deepPurpleAccent, 
),

Converting the Global AppBar Color

To have a consistent appearance across all the pages of your application, you can set the AppBar color at the app level. To do this, you can use the AppBarTheme widget and assign a specific color to the color parameter. This way, the color of the app bar will be the same for all the pages in the app.

Step 1: Find the MaterialApp widget at the Flutter app’s root.

Step 2: Add the ThemeData class as the theme parameter inside the MaterialApp widget.

Step 3: Add the appBarTheme parameter inside the ThemeData class and assign the AppBarTheme class to it.

Step 4: In the AppBarTheme, include a color property and assign a desired color.

MaterialApp(
 title: 'Flutter Demo',
 theme: ThemeData(
   primarySwatch: Colors.blue,
   appBarTheme: AppBarTheme(
       iconTheme: IconThemeData(color: Colors.black),
       color: Colors.deepPurpleAccent, //<-- SEE HERE
),
 ),
 home: ChangeAppBarColorDemo(),
);

Method To Add Color In AppBar In Flutter

There are three primary methods for adding color to the AppBar widget: a predefined color, a custom color, and a theme color.

Color(0xffF02E65): This is achieved by creating a custom color.

Colors.Red: To specify a particular color from a limited range of available colors.

Color. From RGB (255, 66, 125, 145): This uses the RGB (red, green, and blue) color model to create a range of colors by combining different levels of the primary colors.

Example: (change color using theme)

import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
    primarySwatch: Colors.blue,
    appBarTheme:const AppBarTheme(
        iconTheme: IconThemeData(color: Colors.black),
        color: Colors.deepPurpleAccent, 
),
  ),
      debugShowCheckedModeBanner: false,
      home:Scaffold(
      appBar:AppBar(title : const Text("Appbar Example")),
    body : const Center( child :Text(
        "Welcome"),),
        ),
    );
  }
}

Example : (Change color using background color)

import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home:Scaffold(
      appBar:AppBar(title : const Text("Appbar Example"),
                    backgroundColor: Colors.red,),
      body : const Center( child :Text(
        "Welcome"),),
        ),
    );
  }
}

Output :

Conclusion

The AppBar is a frequently used component in many different applications by Flutter developers. It is beneficial for incorporating search fields, navigating between pages, or displaying the page title. Flutter has a particular widget that makes using an AppBar easier – the AppBar widget.

In this article, we explored the various ways to change the color of an AppBar in Flutter, such as at the page level or app level, and discussed the many different methods for adding colors.

Frequently Asked Questions (FAQs)

1. How do I change colors in the Flutter app?

Step 1: Find the file where you must put the Text widget.

Step 2: Inside the Text widget, add a style parameter and assign the TextStyle widget.

Step 3: Include a color parameter inside the TextStyle widget and set your favorite color.

2. How do I change the color of an AppBar drawer in Flutter?

Add the icon theme property inside the AppBar widget and assign IconThemeData to alter a drawer icon in Flutter.

3. What are the various types of Appbars available in Flutter?

AppBar’s layout comprised three elements: leading, title, and actions. However, the leading is placed in the leftmost position in AppBar, and the title and actions are in the right corner.

Managing Offline Data Storage With Flutter Hive

Kuldeep Tarapara — Tue, 04 Apr 2023 09:01:12 +0000

Have you ever heard the name flutter hive? Nearly every app needs local storage for its data. Apps, including those built with Flutter, rely heavily on the ability to store and manipulate data. The replies from a REST API may be cached, an offline app could be developed, or data about customers could be saved for a food delivery service. Flutter provides developers with a number of mechanisms for saving state locally.

Of course, Flutter hive is one of the finest options for offline data storage if you need a fast and secure local database compatible with Flutter Web().

What is Flutter Hive?

Hive is a very fast and small key-value database developed entirely in Dart that can be used to store and synchronize data for applications even when not online.

Hive is a high-performance, Dart-based key-value data store that works with simple and complicated data structures. It is also encrypted with AES-256 for further security.

Steps to Take When Beginning to Manage Offline Data Storage Using Flutter Hive

This blog post will use the TypeAdapter in Flutter app development with the Hive database. Furthermore, we will develop a minimal app consisting of a single page that can be used to see a directory of users, create new users, edit current ones, or remove old ones.

Step 1- First, install any necessary dependencies.

Two prerequisites must be met before Hive can be used.

hive and hive_flutter

The packages Hive and hive flutter must be included to pubspec.yaml.

dependencies:
 Flutter:
       sdk: flutter
 hive: ^2.2.3
 hive_flutter: ^1.1.0
Add the dev dependencies
dev_dependencies:
 flutter_test:
   sdk: flutter
hive_generator: ^1.1.3
build_runner: ^2.2.0

Step 2: Initialization of Hive Database

Before we can proceed with executing runApp in the Flutter app, we must first initialize Hive.

void main() async{
 WidgetsFlutterBinding.ensureInitialized();
   // Initializes Hive with a valid directory in your app files
 await Hive.initFlutter();
 runApp(const MyApp());
}

Hive is responsible for providing the initFlutter() method. Hive is essentially initialized by using the path given by the getApplicationDocumentsDirectory command.

What is a Box in Flutter Hive?

Using boxes, Flutter Hive categorizes the information it stores. The container looks like a SQL table but lacks any particular formatting and may store anything at all. Hive encrypts data, as indicated at the outset. Sensitive information may also be stored in encrypted boxes.

Hive saves its information in the form of key-value sets. You should start by opening the package.

void main() async{
 WidgetsFlutterBinding.ensureInitialized();
// Initializes Hive with a valid directory in your app files
 await Hive.initFlutter();
// open box
await Hive.openBox("userBox");
runApp(const MyApp());
}
Model Class With TypeAdapter

Our illustration includes a number of users, each with information such as their name, hobbies, and descriptions.

lib/models/person.dart
import 'package:hive/hive.dart';
part 'person.g.dart';
@HiveType(typeId: 1)
class Person {
  @HiveField(0)
  final String name;
  @HiveField(1)
  final String country;
  Person({
    required this.name,
    required this.country,
  });
}

It is necessary to import the hive first. The type adapter may be generated by including the user model.g.dart file. Since we’re using the hive generator package, building a TypeAdapter from scratch is unnecessary.

TypeAdapters are generated automatically for almost all classes using the hive generator package. Several fields are marked in the userModel class.

Use @HiveType() to provide the model class and let the generator know it should produce a TypeAdapter.

The class’s fields must be annotated with @HiveField(index) and the matching index.

Execute the following command to build a TypeAdapter class:

flutter packages pub run build_runner build

Here an additional file, data model.g.dart (where g denotes “generated”), will be appended to the existing user model.dart. The resulting filename would be user model.g.dart.

CRUD Operations

Creating Data in Hive

/// Add new user
Future addUser({required UserModel userModel}) async {
 await box.add(userModel);
}

When we touch the floating button, a dialogue window appears where you may get details such as our name, interests, and bio. Then we’ll click the “add” button, and information will populate.

The Flutter Hive ValuelistenableBuilder() stream may eavesdrop on activities inside the container.

Retrieving Data in Flutter Hive

lib/screens/add_screen.dart

import 'package:flutter/material.dart';
import 'package:hive_demo/utils/add_person_form.dart';
class AddScreen extends StatefulWidget {
  @override
  _AddScreenState createState() => _AddScreenState();
}
class _AddScreenState extends State<addscreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text('Add Info'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: AddPersonForm(),
      ),
    );
  }
}
</addscreen>

lib/screens/info_screen.dart

import 'package:flutter/material.dart';
import 'package:hive_demo/screens/update_screen.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:hive_demo/screens/add_screen.dart';
class InfoScreen extends StatefulWidget {
  @override
  _InfoScreenState createState() => _InfoScreenState();
}
class _InfoScreenState extends State<infoscreen> {
  late final Box contactBox;
  // Delete info from people box
  _deleteInfo(int index) {
    contactBox.deleteAt(index);
    print('Item deleted from box at index: $index');
  }
  @override
  void initState() {
    super.initState();
    // Get reference to an already opened box
    contactBox = Hive.box('peopleBox');
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('People Info'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => Navigator.of(context).push(
          MaterialPageRoute(
            builder: (context) => AddScreen(),
          ),
        ),
        child: Icon(Icons.add),
      ),
      body: ValueListenableBuilder(
        valueListenable: contactBox.listenable(),
        builder: (context, Box box, widget) {
          if (box.isEmpty) {
            return Center(
              child: Text('Empty'),
            );
          } else {
            return ListView.builder(
              itemCount: box.length,
              itemBuilder: (context, index) {
                var currentBox = box;
                var personData = currentBox.getAt(index)!;
                return InkWell(
                  onTap: () => Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => UpdateScreen(
                        index: index,
                        person: personData,
                      ),
                    ),
                  ),
                  child: ListTile(
                    title: Text(personData.name),
                    subtitle: Text(personData.country),
                    trailing: IconButton(
                      onPressed: () => _deleteInfo(index),
                      icon: Icon(
                        Icons.delete,
                        color: Colors.red,
                      ),
                    ),
                  ),
                );
              },
            );
          }
        },
      ),
    );
  }
}
</infoscreen>

lib/screens/update_screen.dart

import 'package:flutter/material.dart';
import 'package:hive_demo/models/person.dart';
import 'package:hive_demo/utils/update_person_form.dart';
class UpdateScreen extends StatefulWidget {
  final int index;
  final Person person;
  const UpdateScreen({
    required this.index,
    required this.person,
  });
  @override
  _UpdateScreenState createState() => _UpdateScreenState();
}
class _UpdateScreenState extends State<updatescreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text('Update Info'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: UpdatePersonForm(
          index: widget.index,
          person: widget.person,
        ),
      ),
    );
  }
}
</updatescreen>

lib/utils/add_person_form.dart

import 'package:flutter/material.dart';
import 'package:hive/hive.dart';
import 'package:hive_demo/models/person.dart';
class AddPersonForm extends StatefulWidget {
  const AddPersonForm({Key? key}) : super(key: key);
  @override
  _AddPersonFormState createState() => _AddPersonFormState();
}
class _AddPersonFormState extends State<addpersonform> {
  final _nameController = TextEditingController();
  final _countryController = TextEditingController();
  final _personFormKey = GlobalKey<formstate>();
  late final Box box;
  String? _fieldValidator(String? value) {
    if (value == null || value.isEmpty) {
      return 'Field can\'t be empty';
    }
    return null;
  }
  // Add info to people box
  _addInfo() async {
    Person newPerson = Person(
      name: _nameController.text,
      country: _countryController.text,
    );
    box.add(newPerson);
    print('Info added to box!');
  }
  @override
  void initState() {
    super.initState();
    // Get reference to an already opened box
    box = Hive.box('peopleBox');
  }
  @override
  Widget build(BuildContext context) {
    return Form(
      key: _personFormKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('Name'),
          TextFormField(
            controller: _nameController,
            validator: _fieldValidator,
          ),
          SizedBox(height: 24.0),
          Text('Home Country'),
          TextFormField(
            controller: _countryController,
            validator: _fieldValidator,
          ),
          Spacer(),
          Padding(
            padding: const EdgeInsets.fromLTRB(8.0, 0.0, 8.0, 24.0),
            child: Container(
              width: double.maxFinite,
              height: 50,
              child: ElevatedButton(
                onPressed: () {
                  if (_personFormKey.currentState!.validate()) {
                    _addInfo();
                    Navigator.of(context).pop();
                  }
                },
                child: Text('Add'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
</formstate></addpersonform>

lib/utils/update_person_form.dart

import 'package:flutter/material.dart';
import 'package:hive/hive.dart';
import 'package:hive_demo/models/person.dart';
class UpdatePersonForm extends StatefulWidget {
  final int index;
  final Person person;
  const UpdatePersonForm({
    required this.index,
    required this.person,
  });
  @override
  _UpdatePersonFormState createState() => _UpdatePersonFormState();
}
class _UpdatePersonFormState extends State<updatepersonform> {
  final _personFormKey = GlobalKey<formstate>();
  late final _nameController;
  late final _countryController;
  late final Box box;
  String? _fieldValidator(String? value) {
    if (value == null || value.isEmpty) {
      return 'Field can\'t be empty';
    }
    return null;
  }
  // Update info of people box
  _updateInfo() {
    Person newPerson = Person(
      name: _nameController.text,
      country: _countryController.text,
    );
    box.putAt(widget.index, newPerson);
    print('Info updated in box!');
  }
  @override
  void initState() {
    super.initState();
    // Get reference to an already opened box
    box = Hive.box('peopleBox');
    _nameController = TextEditingController(text: widget.person.name);
    _countryController = TextEditingController(text: widget.person.country);
  }
  @override
  Widget build(BuildContext context) {
    return Form(
      key: _personFormKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('Name'),
          TextFormField(
            controller: _nameController,
            validator: _fieldValidator,
          ),
          SizedBox(height: 24.0),
          Text('Home Country'),
          TextFormField(
            controller: _countryController,
            validator: _fieldValidator,
          ),
          Spacer(),
          Padding(
            padding: const EdgeInsets.fromLTRB(8.0, 0.0, 8.0, 24.0),
            child: Container(
              width: double.maxFinite,
              height: 50,
              child: ElevatedButton(
                onPressed: () {
                  if (_personFormKey.currentState!.validate()) {
                    _updateInfo();
                    Navigator.of(context).pop();
                  }
                },
                child: Text('Update'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
</formstate></updatepersonform>

lib/main.dart

import 'package:flutter/material.dart';
import 'package:hive_demo/models/person.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'screens/info_screen.dart';
main() async {
  // Initialize hive
  await Hive.initFlutter();
  // Registering the adapter
  Hive.registerAdapter(PersonAdapter());
  // Opening the box
  await Hive.openBox('peopleBox');
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<myapp> {
  @override
  void dispose() {
    // Closes all Hive boxes
    Hive.close();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hive Demo',
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      debugShowCheckedModeBanner: false,
      home: InfoScreen(),
    );
  }
}
</myapp>

Updating Data in Flutter Hive

Information associated with a key may be modified using the put() function.

With this, the previously-provided value will be replaced with the new one at that key.

/// update user data
Future updateUser({required int index,required UserModel userModel}) async {
 await box.putAt(index,userModel);

Output

Here, we’re taking use of auto-incrementing values; to make a change based on the index, just call the putAt(index) function on the box object.

Conclusion

Hive is a simple, quick, and secure NoSQL database. An API or developer language is often used to store, retrieve, search, update, query, and otherwise change data in a database. These tasks often occur behind the scenes of a program, undetected by users. Hence, the hive has an efficient database, and particularly, it is blazing rapidly, and it supports almost all platforms.

This article will explain the handling the offline storage with a Flutter hive. However, this functionality will aid you in creating high-quality and feature-rich apps with a few lines of coding! I hope you guys have a clear idea about handling the offline data in Flutter development.

Frequently Asked Questions (FAQs)

1. What is Hive? and why is it used?

Hive is lightweight and has a fast key-value database written in Dart language. It grants you to store and sync application info offline. Thus, it is used to aid primitive and complicated data structures while delivering a high level of performance in the application.

2. How will you get the data from a hive database in Flutter?

Step 1: Install and Initialize the hive database

Step 2: Import hive and generate the type adapter

Step 3: Insert user_model.g.dart to automatically create a userModel class using the hive generator package.

Step 4: Write that type of adapter before calling the run app function to register UserModelAdapter

3. How to store data locally in Flutter with Hive?

To store data locally in Flutter with Hive, you can follow these general steps:

Define your data model
Initialize Hive
Open a Hive box
Write data to the box
Read data from the box
Close the box

4. How do I integrate my flutter app with hive?

Install the Hive package: Add the hive and hive_flutter packages to your pubspec.yaml file and run flutter pub get to install them.
Define your Hive data model: Create a class that extends from HiveObject and define the fields that you want to store in Hive.
Initialize Hive: In your app’s main method, initialize Hive by calling Hive.initFlutter().
Open a Hive box: To open a Hive box, call Hive.openBox() and pass in a unique name for your box.
Read and write data: To read data from your Hive box, call Box.get() the key for the data you want to read. To write data to your Hive box, call Box.put() with the key and the data you want to write.

Flutter Navigation Bar: A Guide to Create Interactive Navigation Items in Flutter Web

Kuldeep Tarapara — Thu, 30 Mar 2023 11:42:47 +0000

In Flutter web, using the navigation bar at the top of the page is common. We aim to create simple web apps with interactive Flutter navigation items, such as showing a mouse pointer. Change the text style on hover and highlight the current selection.

Flutter NavigationBar In web applications, it plays an important role, and different frameworks have different implementation styles. In Flutter, we must mention the differences between mobile and the web. But we can use the same navigation item in the drawer with packages adaptive_navbar in Flutter.

What is Bottom Navigation Bar in Flutter?

The bottom navigation bar helps us navigate from the top-level view of the app. in the navigation bar below. We display a row of widgets by clicking on those widgets. Usually, we show 3 to 5 items in the bottom navigation bar. Let’s see how we can implement the bottom navigation bar.

It is very easy to implement in a Flutter. You can select them individually, navigate to the desired screen, and add text and labels.

The important points to remember while using the navigation bar below:

We can only show a small number of widgets in the bottom

navigation, which can be 2 to 5
There must be at least two bottom navigation items; otherwise, we will get an error.
The icon and title properties are required; we must set corresponding widgets for these.
Add a bottom navigation bar and a bottom navigation bar item in your outline.
Now shows the selected item using the current index, two properties, and the onTap property.
Now we need to show some pages by tapping on an item.
That’s all, and now we can check and run our code.

How to Add Bottom Navigation Bar in Flutter?

First, we will learn how to create a basic bottom navigation bar, its components, and its properties. We will then learn to navigate the pages and create an animated bottom navigation bar. Here we create a simple page with the App Bar and add the name ‘Demo.’

Step 1: Create Scaffold Widgets

We create a Stateful Widget, and within a stateful widget, we create a Scaffold widget. This structure has properties such as a bottom navigation bar.

Step 2: Add Bottom Navigation Bar Widget

Then we create the bottom navigation bar widget. In this widget, we need an item. Here we need a list of items. These are the items. BottomNavigationBar

Step 3: Fill the bottom navigation bar with items

This is a widget, now the BottomNavigationBar item. There are two arguments, an icon and a label. These arguments should not be null.

Every item has an icon and a label. The icon argument contains an icon widget, and the label argument contains a text widget.

Example

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title of Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  State<statefulwidget> createState() {
    return MyHomePageState();
  }
}
class MyHomePageState extends State<myhomepage> {
  int selectedIndex = 0;
  Widget myContacts = const MyContacts();
  Widget myEmails = const MyEmails();
  Widget myProfile = const MyProfile();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("BottomNavigationBar Example"),
      ),
      body: getBody(),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: selectedIndex,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.contacts),
            label: "Contacts",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.mail),
            label: "Emails",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: "Profile",
          )
        ],
        onTap: (int index) {
          onTapHandler(index);
        },
      ),
    );
  }
  Widget getBody() {
    if (selectedIndex == 0) {
      return myContacts;
    } else if (selectedIndex == 1) {
      return myEmails;
    } else {
      return myProfile;
    }
  }
  void onTapHandler(int index) {
    setState(() {
      selectedIndex = index;
    });
  }
}
class MyContacts extends StatelessWidget {
  const MyContacts({super.key});
  @override
  Widget build(BuildContext context) {
    return const Center(child: Text("Contacts"));
  }
}
class MyEmails extends StatelessWidget {
  const MyEmails({super.key});
  @override
  Widget build(BuildContext context) {
    return const Center(child: Text("Emails"));
  }
}
class MyProfile extends StatelessWidget {
  const MyProfile({super.key});
  @override
  Widget build(BuildContext context) {
    return const Center(child: Text("Profile"));
  }
}
</myhomepage></statefulwidget>

Output

Conclusion

Interactive navigation item in Flutter web is utilized to make a better user experience for the website. The users will navigate rapidly and provide a more organized and visually appealing layout. It makes them easier to use and will make them more intuitive. Hence, with the help of an interactive navigation feature, the website’s usage becomes user-friendly and simple to use.

However, Flutter is getting a lot of attention all over the world. It means that Flutter engineers will be in high demand. But, before you partner with a reliable Flutter app development company, you need to clearly understand the project or requirement and your expectations from the Flutter development team.

Feel free to connect with us!

Frequently Asked Questions (FAQs)

1. What is the interactive navigation bar in Flutter?

The interactive navigation bar component has all the important sections or subsection states, organized components and styles. However, sections inside the navbar are interactive. “Hover”, “Pressed”, and many more states are in the sections and subsections.

2. What is a dynamic navigation menu?

The dynamic menu is a modified concept of a menu component, sued when the number of actions available to a user is variable or dynamic. It is also helpful when several actions n the Menu are huge enough to be needed by search functionality.

RaisedButton Deprecation and Migration Guide With An Example

Kuldeep Tarapara — Thu, 23 Mar 2023 10:36:12 +0000

Note: This article is written based on the Flutter SDK version 2.10.0.

Flutter’s RaisedButton widget has been deprecated since the release of Flutter 2. Material Design guidelines recommend that if you hire Flutter developers, they will use the ElevatedButton widget instead of the deprecated RaisedButton. This article will provide migration instructions for experts who need to replace RaisedButton with ElevatedButton.

Why is RaisedButton deprecated?

RaisedButton has been deprecated because it is not compliant with the updated Material Design guidelines. According to the updated guidelines, buttons should have a consistent elevation across different platforms, and the raised appearance of RaisedButton widget is not consistent across all platforms. As a result, ElevatedButton was introduced as a replacement, which has a more consistent elevation across different platforms.

Migration Instructions

To migrate from RaisedButton to ElevatedButton, follow these steps:

Replace all references to RaisedButton with ElevatedButton in your code.
If you used the RaisedButton.icon constructor, replace it with the ElevatedButton.icon constructor.
Update any properties that have changed. The following properties have been renamed or replaced:
Color is now style.backgroundColor
textColor is now style.foregroundColor
If you were using the disabledColor property, replace it with the style property and set the foregroundColor and backgroundColor properties separately.

Import the material.dart package if you haven’t already done so:

import 'package:flutter/material.dart';

6. Update the code where you use RaisedButton to use the

ElevatedButton widget instead. For example:

Before:

RaisedButton(
  onPressed: () {
    // Do something when the button is pressed
  },
  child: Text('Click me'),
)

After:

ElevatedButton(
  onPressed: () {
    // Do something when the button is pressed
  },
  child: Text('Click me'),
)

If you want to style the ElevatedButton, you can use the style property. For example, to change the button’s background color, you can use:

Example

ElevatedButton(
  onPressed: () {
    // Do something when the button is pressed
  },
aElevatedButton(
  onPressed: () {
    // Do something when the button is pressed
  },
  style: ElevatedButton.styleFrom(
    primary: Colors.red, // Set the button's background color
  ),
  child: Text('Click me'),
)
)

Conclusion

In conclusion, RaisedButton has been deprecated, and coders should use ElevatedButton to comply with the updated Material Design guidelines. The migration process involves replacing all references to RaisedButton with ElevatedButton and updating any styling as required. By following these instructions, the development team of Flutter can ensure that their code is up to date and compliant with the latest Material Design guidelines.

If you want to know the usage of RaisedButton Depreciation and Migration in Flutter app development, then you connect with a leading app development company Flutter Agency who will give you complete guidance and knowledge of Flutter with their skills. Don’t hesitate, and feel free to connect with us!

Frequently Asked Questions (FAQs)

1. Why do we use an elevated button?

An elevated button is labeled child viewed on the Material widget whose Material. elevation raises when the Button is clicked. RaisedButton was utilized for this task earlier, which has now been deprecated.

2. What is the significant difference between the elevated and raised buttons in Flutter?

Elevated buttons are the un-deprecated raised buttons with no explicitly defined button stying. However, elevated buttons can not be styled, meaning you can not change the color of a button, Buttontyle, etc., just like raised buttons.

3. How do you provide elevated button width?

The complete width is set to the Elevated Button by including the style parameter; then, use the ElevatedButton. Styleform class to give the size of Button uButtonn property known as the minimum size.

New Material Buttons And ButtonThemes After Flutter 2.0

Kuldeep Tarapara — Tue, 21 Mar 2023 09:55:27 +0000

With the release of Flutter 2.0, the deprecated FlatButton, RaisedButton, and OutlineButton widgets have been replaced by TextButton, ElevatedButton, and OutlineButton widgets, respectively. These new Flutter widgets offer more control over the appearance and behavior of buttons, allowing developers to create more customized user interfaces. In addition, Flutter also provides ButtonThemes further to customize the look and feel of the buttons.

TextButton

The TextButton widget is a flat button widget with no background color or border. It is used for buttons that do not require any additional visual effects or styling. The TextButton widget provides some basic theming options, including the ability to change the button’s text color and text style.

To change the text color of a TextButton, you can use the style property and set the color property of the ButtonStyle object:

TextButton(
  style: ButtonStyle(
    foregroundColor: MaterialStateProperty.all(Colors.red),
  ),
  onPressed: () {},
  child: Text('Click me'),
)

In this example, the foregroundColor property of the ButtonStyle object is set to red, which changes the button’s text colour to red.

ElevatedButton

The ElevatedButton widget is a raised button widget with a background color and a shadow effect. It is used for buttons that need to stand out from the rest of the user interface. The ElevatedButton widget provides advanced theming options, including changing the button’s background color, text color, and shape.

To change the background color of an ElevatedButton, you can use the style property and set the backgroundColor property of the ButtonStyle object:

ElevatedButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.blue),
  ),
  onPressed: () {},
  child: Text('Click me'),
)

In this example, the backgroundColor property of the ButtonStyle object is set to blue, which changes the button’s background colour to blue.

OutlinedButton

The OutlineButton widget is a button widget with a transparent background and a border. It is used for buttons that need to be visible but not distract from the rest of the user interface. The OutlinedButton widget provides advanced theming options, including changing the button’s border color, text color, and shape.

To change the border color of an OutlinedButton, you can use the style property and set the side property of the BorderSide object:

OutlinedButton(
  style: ButtonStyle(
    side: MaterialStateProperty.all(
      BorderSide(color: Colors.red),
    ),
  ),
  onPressed: () {},
  child: Text('Click me'),
)

In this example, the side property of the ButtonStyle object is set to a red BorderSide object, which changes the button’s border colour to red.

ButtonStyle in Flutter

ButtonStyle is a new class introduced in Flutter 2.0, allowing experts to customise buttons’ look and feel. It is used to define the visual appearance of a button, such as its background color, text color, shape, and padding.

ButtonStyle is a combination of different attributes that can be used to create a custom button style. Some of the attributes that can be customized include:

Background color: This property allows you to set the button’s background colour.
Text color: This property allows you to set the color of the text displayed on the button.
Shape: This property allows you to set the shape of the button. You can choose from pre-defined shapes, such as rounded or rectangular, or create your own custom shape.
Padding: This property allows you to set the padding around the button.
TextStyle: This property allows you to set the font style of the text displayed on the button.

How to Use ButtonStyle in Flutter?

To use ButtonStyle, you first need to create an instance of the ButtonStyle class. You can then customize the different attributes of the button style by setting their values. Once the ButtonStyle is defined, you can apply it to a button using the style property.

Here’s an example of how to use ButtonStyle to create a custom style for a TextButton:

ButtonStyle myButtonStyle = ElevatedButton.styleFrom(
  primary: Colors.red,
  padding: EdgeInsets.all(16.0),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20.0),
  ),
);

TextButton(
  onPressed: () {
    // Add your onPressed logic here
  },
  child: Text('My Button'),
  style: myButtonStyle,
)

In the above example, we first define a custom ButtonStyle called myButtonStyle. We set the background color to red, the padding to 16.0, and the shape to a circular border with a radius of 20.0. We then apply the ButtonStyle to a TextButton by setting its style property to myButtonStyle.

ButtonThemes

Flutter 2.0 also introduced some improvements to button theming, making applying consistent styles to all buttons in an app easier. Button themes define the default styling for button widgets in an app. Button themes can be customized by setting properties such as the button’s background color, text color, and shape.

To create a custom button theme, you can use the ThemeData class and set the buttonTheme property:

final myButtonTheme = ThemeData(
  buttonTheme: ButtonThemeData(
    buttonColor: Colors.blue,
    textTheme: ButtonTextTheme.primary,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
  ),
);

In this example, the buttonColor property of the ButtonThemeData object is set to blue, the textTheme property is set to ButtonTextTheme.primary, and the shape property is set to a circular border with a radius of 10.0.

Conclusion

After Flutter 2.0, the Material Buttons and ButtonThemes have undergone significant changes and improvements, providing developers more flexibility and control over their app’s user interface. It allows developers to create custom button themes to match their app’s overall design. The updated ButtonThemes define a consistent look and feel for all the buttons in their flutter app development. Hence, with these improvements, Flutter provides a robust and user-friendly development environment for creating modern and engaging mobile applications.

Frequently Asked Questions (FAQs)

1. How to change the button style in Flutter development?

To modify a Text Button colour in Flutter, add an interior style parameter and assign TextButton. styleForm() with a primary property set to any colour of choice.

2. State the difference between ButtonStyle and styleFrom.

With the help of ButtonStyle(), you have to define all the essential properties with Buttonsytle. However, the styleForm() picks a default set value, and you can only change the required values.

3. What is the elevated button in Flutter?

An elevated button is the label child displayed on the Material widget whose Material. elevation raises when the button is touched. A label’s Text and Icon widgets are viewed in style’s ButtonStyle.foregroundColor, and the button’s filled background is ButtonStyle.backgroundColor.

How To Add Firebase To A Flutter App With Flutterfire CLI?

Kuldeep Tarapara — Thu, 09 Mar 2023 12:50:19 +0000

Firebase is a cloud-based platform that allows developers to focus on creating user-friendly applications for Flutterfire CLI. It functions without having to manage servers or write APIs. It is a Backend-as-a-Service that was initially created as a YC11 startup.

Firebase is a comprehensive suite of tools from Google that enables you to create, monitor, and improve your knowledge of mobile application development. It provides various services, including real-time database, authentication, crash tracking, and analytics. In addition, it functions with push notifications and more. It helps to concentrate on developing the core features of your app.

Features Of Flutterfire CLI

The FlutterFire CLI is an invaluable resource that provides commands to facilitate the installation of FlutterFire. It functions across all supported platforms. This official collection of plugins enables you to incorporate Firebase services into your Flutter application. It already contains a range of essential plugins, with even more planned to be released soon. Below are some of the features:

1. Rapid Fast Build, Without Infrastructure Management

Firebase provides messaging, analytics, crash and databases, and messaging features. It enables reporting that move quickly and focus on your customers.

2. Trusted Through Top Applications, And Google Sponsorship

Firebase is built on a reliable and robust Google platform. It allows for expansion and accommodates the needs of even the most expansive applications without manual intervention.

3. Single Platform, With Better Collective Functioning Products

Firebase products are highly effective when used independently. They reach even more incredible performance when combined and used to share data and insights.

Adding Firebase to a Flutter App:

FlutterFire is a collection of plugins that allow a Flutter application development to communicate with Firebase. The FlutterFire CLI is a useful utility that provides helpful commands. It is to simplify setting up FlutterFire on all compatible platforms. Below are the steps to add the Firebase to the flutter app:

Stage 1: Installing Firebase CLI

Firstly, we will need to install Node.js. Go to the website and download the latest Long-Term Support (LTS) version. Carefully follow the installation process and do not make any changes. Install the nodejs folder in the directory (C:\Program Files\nodejs). After completion of the installation, open the Environment Variables and add two directories to the Path.

C:\Users\{Your_Username}\AppData\Roaming\npm
C:\Program Files\nodejs

Here, Install the Firebase CLI through npm by running the below-mentioned code:

> npm install -g firebase-tools

You can use the directory:

C:\Users\{Your_Username}\AppData\Roaming\npm

Verify that the Firebase. cmd file is present in the installation directory. If not, try re-running the command prompt as an administrator. Log into Firebase using your Google account and run the command:

> firebase login

dart pub global activate flutterfire_cli

Stage 2: Creating And Configuring The Firebase Project

Secondly, the initial step is to set up a project on the Firebase console and get the Android/iOS native apps and Flutter app. It is ready to utilize the Firebase services. To build a Firebase console project, here is the process:

Move towards the Firebase console
Click to Add the project
Enter the project name and Continue
Continue Enabling Google Analytics and click on Continue
Choose Google Analytics and confirm on Create project

Stage 3: Configuration Of An Android

Once the project is set up, the project dashboard should be visible. For Android projects, below are the projects:

Connect with the Android icon.
Join the SHA-1 key and package name and connect the Registration application in the Register segment.
Download the google-services.json file and mark it on the Android application listing. Here is the pattern: android/app/google-services.json
Add Firebase dependency, mentioned while adding the Firebase SDK segment.
Click on Continue to console.

Stage 4: Configure The iOS

To create a native iOS app using Flutter, configure it to work with the iOS platform. It functions by following the instructions provided in the Flutter documentation:

Click the Add application button on the project dashboard,
Connect to the iOS icon
Register to bundle ID and click Register application in the Register segment
Explore Xcode, and move the GoogleService-Info.plist file by dragging and dropping it into the Runner subfolder
Follow the guidelines as defined in the “Add initialization code” and “Add Firebase SDK” segments
Click on Continue to console

Stage 5: Set Up The Flutter Project

To use any Firebase service, it is necessary to install the firebase_core plugin. This plugin enables communication between the app and the Firebase database system. To do this, add the firebase_core dependency to the file and run with a specific command. Below is the code:

Dependencies:

flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  firebase_core: ^1.0.1 
flutter pub get

Stage 6: Verification

Ensuring the security of user data is paramount for any mobile app. Authentication is essential to guarantee that only authorized users can access and use the app. It can upload any personal or confidential information.

Firebase Authentication supplies backend services and straightforward-to-use software development kits (SDKs). It helps to verify the users of your app. It supports authentication through passwords, telephone numbers, and third-party platforms. It includes Google, Facebook, Twitter, GitHub, and Apple. We will employ the firebase_auth plugin to implement authentication in our app.

Stage 7: Facilitating Validation In The Firebase Console for Flutterfire CLI

Before incorporating the firebase_auth plugin in the application, it enables the validation in the Firebase console:

Connect to the Authentication option in the left-hand set of choices.
Choose the Sign-in approach tab.
Connect Google, and switch on the Enable button. Then choose the help email from the listing. You can select any login technique.
Click Next

Stage 8: Add Dependency

Combine the google_sign_in dependencies and firebase_auth within the code. Therefore, When you take the help of a Flutter developer, they use the code:

dependencies:
  Flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  firebase_core: ^1.0.1 
  firebase_auth: ^1.0.1 #new
  google_sign_in: ^5.0.0 #new

Conclusion

This tutorial integrated the FlutterFire plugin Authentication into a Flutter app. Additionally, when Flutter experts use the above code examples, it will quickly demonstrate how the FlutterFire plugins operate in the real world. You can use the debugging tools to identify any issues with the FlutterFire plugins. In addition, it can also use the data gathered to improve the user experience.

Frequently Asked Questions (FAQs)

1. How to access the Firebase data in the Flutter app?

To use Firebase with Flutter, you must set dependencies in the pubspec file. After that, you must import firestore, i.e., a database provided by Firebase for data handling. After that, import Firebase dependencies into the dart file. import. ‘package:cloud_firestore/coud_firestore.

2. What is Firebase Flutterfire CLI?

The Fiebase CLI is a utility used to administer Firebase projects and perform real-time database management tasks from a command line of the terminal or command-prompt window. Hence, the Firebase cloud functions deploy and manage the Firebase CLI method.

3. What should I use, Firebase SDK or REST API?

Selecting between both of them is dependent on your application requirements. If you want your app to have a real-time database, you should go with a firebase. But, if you need more efficient queries during development, you should pick REST APIs. Hence, you can combine the two by attaching the Firebase database to the REST API.

A Quick Guide to Riverpod Data Caching and Provider Lifecycles

Kuldeep Tarapara — Thu, 02 Mar 2023 10:09:40 +0000

Riverpod involves reactive caching along with the data binding framework. These have widely evolved from the provider packages. Normally, the Riverpod is the rewrite for the Provider package. These are suitable options for making improvements that are quite impossible to access.

Most people want to view the state management framework, which involves extensive Reactive Caching and Data-binding Framework. Riverpod 2.0 has been enabled from the valuable concepts of the React Query. These provide better accessibility from Flutter world to high excellence.

Flutter Riverpod 2.0

Normally, the Provider package involves improvements on InheritedWidget. These extensively depend on a complete widget tree that can be easily enabled. Riverpod is also the 100% compile safer option, as most providers have been using them worldwide.

Riverpod could be easily accessed from anywhere, even without any hassle. Provider package involves the easy-to-use package wrapped across InheritedWidgets. These make it a convenient option for using and managing them accordingly.

Versatile and used for most feature
Helpful to create and combine providers
Performs reactive caching
Easily fetch
Catches programming errors at compile-time
Disposes state of a provider
Depends on asynchronous
Updates data from a remote source
Writes testable code
Keep your logic outside the widget tree

The method would provide the Flutter app state management technique suitable for data management. Riverpod Data Caching is an advanced technique from the provider package and is assured of giving better stability even without any hassle.

Below are the steps for providing full accessibility, such as:

final counterProvider = StateNotifierProvider<counter, int="">((ref) {
  return Counter();
});
Class Counter extends StateNotifier<int> {
Counter() : super(0);
  void increment() => state++;
}
</int></counter,>

To consume the provider, you can follow the below steps:

class Home extends ConsumerWidget { 
@override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    return Text('$count');
  }
}

Riverpod implements the complete range of patterns. These are helpful for retrieving and caching the data. There is no need to reimplement them for the accessibility feature. These are quite efficient options for establishing good app architecture. These can also be suitable for focusing on building the feature with minimal friction.

Explore The Main Riverpod APIs

In the modern day, the new riverpod_generator package has been published as the biggest part of Riverpod 2.0. Apart from these, it also introduces a new @riverpod annotation API. You can also easily use them automatically to generate the providers for the Methods and Classes in the codes.

Compile safe feature is also added in the process. So there are also no requirements for the ProviderNotFoundException or even forgetting the handle loading state. It extensively adds the providers anytime and anywhere without any hassle.

The method is the perfect option for declaring the shared state from anywhere. There is no need to jump from the main.dart and UI files anymore. You can easily place the code of the shared state where it belongs. These can be enabled with a separate package or even added next to the Flutter widget.

final countProvider = StateProvider((ref) => 0);
// Consumes the shared state
class Title extends ConsumerWidget {
 @override
Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(countProvider);
    return Text('$count');
  }
}

The method involves the stale-while-revalidate pattern having the complete riverpod. You can also extensively look at the query_provider package. The backend class could be easily made using the ghibli-api. The Tested Provider.family is a significant option in easily checking whether the state is persistent with memory.

How Does The Provider Package Start?

Normally, the Provider package starts with the two possible attributes, such as

If we call runApp inside main for attaining the top-level ProviderScope

If we call the CounterWidget widget mounted and call the ref.watch in the build method

Based on the different criteria, changing the print statements on the code will be efficient.

void main() { 
print('Inside main'); 
runApp(ProviderScope(
    child: MaterialApp(     
home: CounterWidget(),
    ),
  ));
}
final counterStateProvider = StateProvider<int>((ref) { 
print('counterStateProvider initialized');
  return 0;
});
</int>

counterStateProvider involves the complete initialization when they are called as ref.watch(counterStateProvider). The main reason is that the Riverpod providers can save more time due to the app development process even without hassle.

Print statements, along with the debug breakpoints, are some of the amazing ways to explore the app’s runtime behavior. These could be easily diagnosed and fixed with countless bugs to high excellence. A method is a suitable option for running Flutter smoothly with these tools.

How To Register Listeners In Riverpod Data Caching?

For registering the Listener in Riverpod Data Caching as well as Providers Lifecycle, you can follow the below steps

class CounterWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 1. watch the provider 
    final counter = ref.watch(counterStateProvider);
    return ElevatedButton(
      // 2. use the value     
child: Text('Value: $counter'),
      // 3. increment the counter when the button is pressed     
onPressed: () => ref.read(counterStateProvider.notifier).state++,
    );
  }
}
Call ref.watch(counterStateProvider) inside the build method

These involve the 2 processes in the end results even without any hassle. You can get the provider’s state or counter value, so these show the UI accordingly. CounterWidget is an amazing listener on counterStateProvider. These can be extensively built with the provider state changes.

*These methods also affect the results of the Provider, such as: *

Provider’s state can be easily initialized with the first listener
Listeners are notified when the state changes
Listeners are updated/rebuild themselves
Providers can have better than one listener
The counter app had one provider as well as a listener widget
Observable Pattern
- Providers also listen to other providers
- Riverpod builds upon observable pattern

Both ref.watch() and ref.listen() are used to register listener to provider

One-time read feature
Does not register a listener

Provider maintains state and keeps memory until enclosing ProviderScope is eliminated. These can access the user to kill apps enabled with -level ProviderScope.

Conclusion

Riverpod enables the complete aspects of code to compile attributes. The Provider package has widely inspired Riverpod. These are also suitable options for solving key issues like supporting multiple providers of the same type. These also await asynchronous providers. If you are thinking of developing medium-to-large-size business applications, this information about Riverpod will be helpful to you.

Frequently Asked Questions (FAQs)

1. Is Riverpod better than the Provider?

To understand, let’s see the major drawback of the provider package. By designing, Provider is the improvement over the inherited widget, and it depends on the widget tree. On the other hand, Riverod is the compile safe since all the providers are declared globally, and it is accessible from anywhere.

2. What does future Provider mean with Riverpod?

FutureProvider is a simple and convenient method to expose the configuration object build by just reading the JSON file. It will automatically rebuild UI when the future completes. At the same time, if various widgets want configuration, then the asset is decoded only once.

3. What is the ephemeral state of Riverpod?

The state local to any widget is known as an ephemeral state. The state is contained within the single widget, and there is no requirement for the complicated state management technique of just using a Stateful widget to rebuild a UI.

VSCode Shortcuts, Extensions & Settings for Flutter Development

Kuldeep Tarapara — Tue, 28 Feb 2023 06:07:05 +0000

Flutter is an amazingly popular cross-platform UI framework used for a wider number of applications. These are superior options for easily creating a rich desktop, mobile as well as a web application development.

In the modern day, Flutter users have been growing tremendously with the vast collection of the Extension and Plugin. These are especially available in the market to help developers to increase their range of productivity. Visual Studio Code IDE is also the perfect option for complete Flutter development.

VSCode Shortcuts Installation And Setup

Installing the Flutter extension gives you a better option for easily automating the code in VS Code. These can be easily accessed in the automatic format with codes that are enabled with the current source code window. These are set with single-format documents. Follow the Set-up editor instructions for installing the Dart as well as Flutter extensions in the feature.

Normally, updating the extension also gives you the regular shipment basis to the extent. VS Code updates extensions by default when these give you absolute results.

For installing manually, you can follow the below steps

Click the Extensions button

Click the Update button
Reload button
Restart VS Code

Flutter extension can be easily implemented by following the above steps. You can also easily create the project accordingly with the standard features. There are many methods available for creating a new project. Below are the steps for creating the new Flutter project using the Flutter starter app template

Open Command Palette or click the (Ctrl+Shift+P (Cmd+Shift+P on macOS))
Select Flutter
New Project command

Click “Enter”
Select “Application”

Press “Enter”
Select Project location
Enter the desired Project name
Open project using the existing source code
Click ‘File’
Open from the main IDE window
Browse the directory holding existing Flutter source code files
Tap ‘Open’
Follow the below steps to easily edit the code and view the issue. Flutter extension would perform the complete code analysis, such as

Navigating to type declarations
Code completions with analysis
Syntax highlighting
Finding type usages
Viewing all current source code problems
Running and debugging

What are the VSCode Shortcuts for Flutter Development?
Visual Studio Code Shortcuts and extensions play an important role in complete Flutter app development. These are the superior option for saving time in accessing more features.

Below is some of the list of Visual Studio Code Shortcuts:

1. Quick Fix

The Quick Fix feature can be easily used anywhere in the editor to get the list of code actions. The process requires the CMD+ along with enabling the CTRL+. Normally, the user could easily wrap them and extract them by removing the Flutter widget amazingly. These are also quite convenient options for creating the data class methods from the existing properties of the class.

2. Search files by name

The Search files by name are also one of the amazing shortcuts for opening the file in the projects. There is no need to access other features for this shortcut, as you can use the keyboard. The shortcut keys are CMD+P for MacOS and CTRL+P for Windows.

Show Command Palette
Show Command Palette allows the user to easily bring the search box by enabling accessibility. These are also significant options for seeing everything with the commands along type to search for new ones. CMD+Shift+P is the shortcut for MacOS, and CTRL+Shift+P is the shortcut for Windows.
Flutter and Dart snippets
Flutter and Dart’s snippets are quite amazing options for easily using the common Flutter widgets. These involve the quick process for gaining insert features with VSCode Shortcuts.

Some of the shortcuts are listed below, such as:

stless: Insert a StatelessWidget

stanim: Insert a Stateful Widget using AnimationController

stful: Insert a StatefulWidget

The mobile app development process also allows for easily generating boilerplate code, which can also be useful for enabling the name widget. These also enable using the snippets for generating the common code blocks. It includes the function definitions, if/else, for loops, and many others.

You can also easily check the file available in the Dart snippets. You can install the Awesome Flutter Snippets extension to easily take more features. These also provide you with the superior option for adding useful snippets.

Dart: Add Dependencies

Dart: involves the amazing attribute of providing you the stability for accessing the new feature.

Open command palette
Type “Dart: Add Dependency”

Get the list of packages available in the pub. Dev:

Click dependency
It involves the added pubspec.yaml file
The process is installed automatically

5. Keyboard shortcuts list

Normally, Visual Studio Code has a wide number of shortcuts available. You can also see them completely customized with key bindings. Below is the list of shortcuts used for the MacOS and Windows OS.

CMD+K CMD+S for MacOS

CTRL+K CTRL+S for Windows OS

Newly Built Modes

Normally, Flutter provides you with various modes for running the app. Follow the below steps to easily access Flutter’s build modes.

Open VS Code
Access the launch.json file
Go running view in VS Code
Click create a launch.json file. If you do not have a launch.json file
Change flutterMode property to build mode

In the configurations section, your launch.json might look like this

 "configurations": [
{ 
"name": "Flutter," 
"request": "launch," 
"type": "dart," 
"flutterMode": "debug"
}
 ]

VSCode Extensions for Flutter Development

Choosing the right extensions lets you save time by giving the better accessibility.

1. Dart Data Class Generator

The Dart Data Class Generator is a suitable option for extensively creating the model classes for gaining better accessibility. You can easily choose the different methods like copyWith(), toString(),toMap(), fromMap(),toJson(), fromJson(),==, and more.

These also involve the error-prone and enabling usage of the Dart Data Class Generator. It is also the alternative option for the JSON to Dart Model, so they are configurable for enabling the code generation libraries such as the Json Serializable and Freezed

2. Flutter Riverpod Snippets

Most people are tired of typing providers’ and consumers’ names in their hands. Flutter Riverpod Snippets is an amazing extension for making the task simple. It is convenient to simply download and document the Flutter Riverpod Snippets.

Conclusion

Visual Studio Code (VSCode) is a popular and powerful code editor that can be used for Flutter development with the help of some useful shortcuts, extensions, and settings. Visual Studio Code or VSCode is an amazing IDE suitable for achieving stability during the development phase. These methods are also a superior option for customizing and boosting the workflow to high excellence.

Flutter extensions, settings, and VSCode Shortcuts is the most useful function when you want to get a wider audience, whether you are using services or not. If you plan to develop a mobile application with Flutter, connect with a Flutter agency that ensures you will get the updated mobile apps. Let’s consult our experienced developers and build custom-centric and feature-rich applications.

Frequently Asked Questions (FAQs)

1. How do you format the Flutter code in VS code extension?

Install the Flutter extension to get automatic formatting of code in VS code. However, to automatically format the code in the current source code window, you have to right-click in the code window and choose the format document. Hence, you can add the keyboard shortcut related to this VS code preferences.

2. How to configure VS code extension?

You can browse and install the extensions from internally with VS Code. You can bring up the extensions view by clicking on the extension icon in the Activity bar on the side of VS code or a view: Extensions command. Therefore, you can get the list of the most popular VS code extensions on VS code marketplace.

3. What is build() in Flutter?

The build method is called whenever you call setState. Your widgets dependencies update or the parent widgets are rebuilt. Thus, your widget will depend on any of the InheritedWidget you use, e.g., Theme. of (context), MediaQuery. of (context), etc.

DEV Community: Kuldeep Tarapara

5 Best Android launchers in 2024 (Free and Paid)

1. Nova Launcher:

2. Microsoft Launcher

3. Lawnchair

4. Smart Launcher 6

5. Nothing Launcher

Choose wisely!!!

Customizing Color in Flutter Theming with Light and Dark Modes

What is Flutter theming?

Flutter theming with custom color: Step-by-Step Guide

Step 1: Make a Light/Dark theme

Step 3: Utilize theme in the app

Step 4: Add custom color

Code of our main screen:

Conclusion

Frequently Asked Questions (FAQs)

How to Localize Your React Native App With Gridly

The importance of Localization for App Development

Introduction to Gridly

How Gridly Works?

Set Up of the Gridly Grid

Configuring a React Native App Development Project

Create a new React Native app project.

Install i18next dependencies

Configure Gridly

Translation

Original App.tsx file:

Conclusion

Flutter Form Validation: A Guide to Build a Form With Validation in Flutter

What Is Form Validation?

What Is Client-Side Validation?

Methods For Building Form Validation

Creating A Form Using Globalkey

How To Add TextFormField With Validation Logic?

How To Create A Button To Validate The Form?

Example

Conclusion

Frequently Asked Questions (FAQs)

How to Change AppBar Color in Flutter – A Beginner’s Tutorial

AppBar In Flutter: An Overview

How to Create AppBar In Flutter?

Step 1: Generate a New Flutter Application:

Step 2: Clear The Automated Generated Coding In Flutter App:

Step 3: Customization Scope In Appbar:

Step 4: Generate AppBar Activity In Flutter

Output

Change AppBar Color on Page Level In Flutter

Converting the Global AppBar Color

Method To Add Color In AppBar In Flutter

Example: (change color using theme)

Example : (Change color using background color)

Output :

Conclusion

Frequently Asked Questions (FAQs)

Managing Offline Data Storage With Flutter Hive

What is Flutter Hive?

Steps to Take When Beginning to Manage Offline Data Storage Using Flutter Hive

Step 1- First, install any necessary dependencies.

Step 2: ​​Initialization of Hive Database

What is a Box in Flutter Hive?

Execute the following command to build a TypeAdapter class:

CRUD Operations

Retrieving Data in Flutter Hive

Updating Data in Flutter Hive

Output

Conclusion

Frequently Asked Questions (FAQs)

Flutter Navigation Bar: A Guide to Create Interactive Navigation Items in Flutter Web

What is Bottom Navigation Bar in Flutter?

How to Add Bottom Navigation Bar in Flutter?

Step 1: Create Scaffold Widgets

Step 2: Add Bottom Navigation Bar Widget

Step 3: Fill the bottom navigation bar with items

Example

Output

Conclusion

Frequently Asked Questions (FAQs)

RaisedButton Deprecation and Migration Guide With An Example

Why is RaisedButton deprecated?

Step 2: Initialization of Hive Database