DEV Community: raman04-byte

Exploring HTTP Requests in Flutter

raman04-byte — Wed, 08 Nov 2023 02:30:00 +0000

I'm excited to share insights into the world of HTTP requests in Flutter and how they play a vital role in mobile app development. Before diving into practical examples, I'd like to direct your attention to a couple of resources that can complement and expand your understanding of this topic.

I've created a YouTube video that delves into the very topic we're about to explore. In the video, I demonstrate the execution of HTTP requests in a Flutter environment, providing a visual guide that might enhance your understanding. You can find the video here. https://youtu.be/ml5Bv1zf6fI (Highly Recommended)

Additionally, I've curated a repository on GitHub where you can find relevant code snippets, supplementary materials, and resources related to the examples we'll be discussing. The GitHub repository is accessible here. https://github.com/raman04-byte/api_tutorial

Let's embark on this journey together, discovering the power and versatility of HTTP requests within Flutter and how they drive dynamic data interactions in mobile applications.

Utilizing the HTTP Package

Flutter's http package simplifies the process of making HTTP requests and handling responses. Let's explore two sample codes showcasing GET and POST requests.

Sample Code 1: Performing a POST Request

The following code demonstrates how to send data to a server using a POST request:

import 'dart:async';
import 'dart:convert';

import 'package:apitutorial/home.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

Future<Album> createAlbum(String title) async {
  final response = await http.post(
    Uri.parse('https://jsonplaceholder.typicode.com/albums'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'title': title,
    }),
  );

  if (response.statusCode == 201) {
    // If the server did return a 201 CREATED response,
    // then parse the JSON.
    return Album.fromJson(jsonDecode(response.body) as Map<String, dynamic>);
  } else {
    // If the server did not return a 201 CREATED response,
    // then throw an exception.
    throw Exception('Failed to create album.');
  }
}

class Album {
  final int id;
  final String title;

  const Album({required this.id, required this.title});

  factory Album.fromJson(Map<String, dynamic> json) {
    return Album(
      id: json['id'] as int,
      title: json['title'] as String,
    );
  }
}

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  final TextEditingController _controller = TextEditingController();
  Future<Album>? _futureAlbum;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Create Data Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Create Data Example'),
        ),
        body: Container(
          alignment: Alignment.center,
          padding: const EdgeInsets.all(8),
          child: (_futureAlbum == null) ? buildColumn() : buildFutureBuilder(),
        ),
      ),
    );
  }

  Column buildColumn() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        TextField(
          controller: _controller,
          decoration: const InputDecoration(hintText: 'Enter Title'),
        ),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _futureAlbum = createAlbum(_controller.text);
            });
          },
          child: const Text('Create Data'),
        ),
      ],
    );
  }

  FutureBuilder<Album> buildFutureBuilder() {
    return FutureBuilder<Album>(
      future: _futureAlbum,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return Text(snapshot.data!.title);
        } else if (snapshot.hasError) {
          return Text('${snapshot.error}');
        }

        return const CircularProgressIndicator();
      },
    );
  }
}

This code is a simple Flutter application that demonstrates creating an album by sending a POST request to a mock API endpoint using the http package in Dart. Here's a breakdown of the major components:

Import Statements

Importing necessary Dart and Flutter packages like async, http, material, and json.

Album Class

Album class represents an album with an id and title. It contains a constructor and a fromJson factory method to convert JSON data into an Album object.

createAlbum Function

createAlbum is an asynchronous function that uses the http.post method to send a POST request to the specified API endpoint ('https://jsonplaceholder.typicode.com/albums').

It sends a JSON payload containing the album title in the request body.

If the request is successful (returns a status code of 201 - Created), it parses the response JSON and creates an Album object using the fromJson factory method.

If the request fails or returns a different status code, it throws an exception indicating the failure to create an album.

Main Function

main function sets up the Flutter application by running the MyApp widget.

MyApp Class

MyApp is a stateful widget that defines the root of the application.

_MyAppState Class

_MyAppState is the state associated with MyApp and contains the text controller for the input field and a Future object to handle the asynchronous creation of an album.

build Method

The build method sets up the UI of the application.

It configures the app's theme and defines the Scaffold with an AppBar and a body.

The body contains a container with a column widget, which contains a text field for entering the album title and a button to trigger the creation of the album.

buildColumn Method

buildColumn returns a column containing a text field and a button.

The button triggers the creation of the album by calling the createAlbum function when pressed.

buildFutureBuilder Method

buildFutureBuilder returns a FutureBuilder widget. It displays different UI elements based on the state of the asynchronous operation (_futureAlbum).

If the operation is complete and successful, it displays the title of the created album.

If there's an error during the operation, it displays the error message.

While the operation is in progress, it displays a circular progress indicator.

The application allows users to enter a title for an album, create it via a POST request, and displays the result or error message accordingly using Flutter's FutureBuilder.

This code showcases a function createAlbum that sends a POST request to a server. It includes an Album class representing the structure of an album and a UI setup in the MyApp class allowing users to input an album title and create an album.

Sample Code 2: Performing a GET Request

Let's take a look at the code that fetches data from a server using a GET request:

import 'package:apitutorial/model/response/list_of_response.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:cached_network_image/cached_network_image.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List<ListOfData> _list = [];

  Future<List<ListOfData>> getAllData() async {
    try {
      final response =
          await http.get(Uri.parse('https://fakestoreapi.com/products'));
      if (response.statusCode == 200) {
        final data = jsonDecode(response.body);
        _list = data.map<ListOfData>((e) => ListOfData.fromJson(e)).toList();
        debugPrint('${_list.length}');
        return _list;
      } else {
        debugPrint(
            'Error in API call Please check your backend and URL carefully');
      }
      return _list;
    } catch (e) {
      debugPrint('$e');
    }
    return _list;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
          future: getAllData(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                  itemCount: _list.length,
                  shrinkWrap: true,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text('${_list[index].title}'),
                      subtitle: Text('${_list[index].description}'),
                      leading: SizedBox(
                        height: 50,
                        width: 50,
                        child: CachedNetworkImage(
                          imageUrl: '${_list[index].image}',
                          progressIndicatorBuilder: (context, url, progress) =>
                              CircularProgressIndicator(
                                  value: progress.progress),
                        ),
                      ),
                      trailing: Text('${_list[index].price}'),
                    );
                  });
            } else if (snapshot.hasError) {
              return const Text("Error");
            }
            return const Text("No Data");
          }),
    );
  }
}

This code represents a Flutter StatefulWidget named HomeScreen that fetches data from a specified API endpoint and displays the information in a ListView.

Here's a breakdown of the code:

Import Statements

Various package imports are included such as material from Flutter, http for making HTTP requests, cached_network_image for efficiently loading and caching network images, and json for encoding and decoding JSON data.

HomeScreen Class

HomeScreen is a StatefulWidget representing the main screen of the application.

_HomeScreenState Class

_HomeScreenState manages the state for the HomeScreen.

State Variables

_list is a list of ListOfData objects.

getAllData Method

getAllData is an asynchronous function that makes an HTTP GET request to 'https://fakestoreapi.com/products' to fetch data.

If the response status is 200 (OK), the JSON response is decoded and used to populate the _list by mapping the JSON data to ListOfData objects (presumably defined in 'list_of_response.dart').

Debug print statements are used to display the count of items fetched or any error encountered during the API call.

build Method

The build method configures the UI for the HomeScreen.

It displays a Scaffold containing a FutureBuilder that waits for the result of getAllData.

When data is received, it displays a ListView.builder widget, populating the list with data fetched from the API.

Each list item is represented by a ListTile containing text fields for the title, description, and price. It also includes a CachedNetworkImage widget for loading and displaying the product image.

The FutureBuilder is responsible for showing different UI components based on the current state of the asynchronous operation:

If data is available, it displays the list of items fetched from the API.

If there is an error during the API call, it shows an error message.

If no data is available, it displays a message indicating the absence of data.

This code provides a basic structure to fetch data from an API and display it in a list format, including images loaded from network URLs using the cached_network_image package to ensure efficient caching and loading of images in the Flutter app.

Both sample codes illustrate practical implementations of making HTTP requests in Flutter using the http package. The first code focuses on creating data through a POST request, while the second code emphasizes retrieving and displaying data via a GET request.

Continuing the article with a discussion on best practices, error handling, and the nuances of using Flutter's HTTP library would complement the multimedia content and provide a comprehensive guide for readers interested in networking with Flutter applications.

Making the image element of the docs

raman04-byte — Wed, 01 Nov 2023 02:30:00 +0000

I have summarized every bit made a video of it, and provided all the code on GitHub, check them out:

GitHub: https://github.com/raman04-byte/flutter_docs

Video: https://youtu.be/uz3KwnQ0KH4

In this blog, we are going to make the Flutter docs image part

For this, we need an image of the left and right which is available on GitHub

Now, updation in the home_template.dart file:

import 'package:docs_flutter/feature/home/template/home_row.dart';
import 'package:docs_flutter/feature/home/template/image_container.dart';
import 'package:flutter/material.dart';


class HomeTemplate extends StatefulWidget {
  const HomeTemplate({super.key});

  @override
  State<HomeTemplate> createState() => _HomeTemplateState();
}

class _HomeTemplateState extends State<HomeTemplate> {
  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        HomeRow(),
        ImageContainer(),
      ],
    );
  }
}

Let's take a look at the ImageContainer() file:

import 'package:docs_flutter/constants/assets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

import '../../../constants/colors.dart';
import '../../../constants/dimes.dart';

class ImageContainer extends StatefulWidget {
  const ImageContainer({super.key});

  @override
  State<ImageContainer> createState() => _ImageContainerState();
}

class _ImageContainerState extends State<ImageContainer> {
  bool isHovering1 = false;
  bool isHovering2 = false;
  @override
  Widget build(BuildContext context) {
    return Container(
      height: Dimensions.scaleH(100),
      width: double.infinity,
      color: AppColor.imageBackColor,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          RotatedBox(
            quarterTurns: 2,
            child: SvgPicture.asset(
              Assets.image2,
              height: Dimensions.scaleH(100),
              width: Dimensions.scaleW(100),
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(
              vertical: Dimensions.scaleH(23),
            ),
            child: Column(
              children: [
                Text(
                  "Flutter 3.13 scroll into view!",
                  style: TextStyle(
                      color: Colors.white, fontSize: Dimensions.scaleH(18)),
                ),
                SizedBox(
                  height: Dimensions.scaleH(5),
                ),
                RichText(
                  text: TextSpan(children: [
                    TextSpan(
                        text: 'Check out the ',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: Dimensions.scaleH(18))),
                    TextSpan(
                      mouseCursor: SystemMouseCursors.click,
                      onEnter: (_) {
                        setState(() {
                          isHovering1 = true;
                        });
                      },
                      onExit: (_) {
                        setState(() {
                          isHovering1 = false;
                        });
                      },
                      text: 'announcement ',
                      style: TextStyle(
                        color: const Color(0xFF94dcf9),
                        fontSize: Dimensions.scaleH(18),
                        decoration: isHovering1
                            ? TextDecoration.underline
                            : TextDecoration.none,
                      ),
                    ),
                    TextSpan(
                        text: 'and the ',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: Dimensions.scaleH(18))),
                    TextSpan(
                      mouseCursor: SystemMouseCursors.click,
                      onEnter: (_) {
                        setState(() {
                          isHovering2 = true;
                        });
                      },
                      onExit: (_) {
                        setState(() {
                          isHovering2 = false;
                        });
                      },
                      text: 'what\'s new',
                      style: TextStyle(
                        color: const Color(0xFF94dcf9),
                        fontSize: Dimensions.scaleH(18),
                        decoration: isHovering2
                            ? TextDecoration.underline
                            : TextDecoration.none,
                      ),
                    ),
                    TextSpan(
                      text: ' page',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: Dimensions.scaleH(18),
                      ),
                    ),
                  ]),
                )
              ],
            ),
          ),
          SvgPicture.asset(
            Assets.image2,
            height: Dimensions.scaleH(100),
            width: Dimensions.scaleW(100),
          )
        ],
      ),
    );
  }
}

Container Styling:

The Container is the main building block of the widget. It's styled with specific properties:

height: Set to a dynamically scaled value using Dimensions.scaleH(100).

width: Set to double.infinity, making it span the entire available width.

color: The background color is defined using AppColor.imageBackColor.

Layout Structure:

The container's layout is built using a Row widget, organizing the content horizontally with two main sections.

Content Section 1:

Rotated Image (SVG):

Utilizes RotatedBox to display an SVG image (SvgPicture.asset) fetched from Assets.image2.

The image's size is defined by the Dimensions.scaleH(100) for height and Dimensions.scaleW(100) for width.

Content Section 2:

Text and Links:

Text and links are organized within a Column widget.

Text content is displayed with specific styles like font size and color for each text segment.

The RichText widget is employed to construct a rich text format with multiple styles and hover effects for certain sections of the text.

Hover Effects:

Hover effects are implemented on certain text segments to change the decoration (underline) and style when the mouse hovers over them. This is controlled by the isHovering1 and isHovering2 boolean variables toggled with onEnter and onExit callbacks.

Content Section 3:

Second Image (SVG):

Another SVG image (SvgPicture.asset) is placed at the end of the row, similar to the first image.

Event Handling:

onEnter and onExit callbacks are utilized within the RichText widget to manage the state of isHovering1 and isHovering2 variables, creating the hover effect for specific text segments.

Dynamic Rendering:

The layout and styles are designed to be responsive to various screen sizes by using the Dimensions class for scaling dimensions.

This widget is structured to create an image container with a rich layout containing images, text, and interactive elements. The hover effects on certain text sections aim to enhance user interaction within the Flutter application.

Here is the final result of what we have built with the help of code:

PREREQUISITE OF THE APPLICATION

raman04-byte — Fri, 20 Oct 2023 02:30:00 +0000

Video Link: https://youtu.be/A_rByYAxStY

GitHub Repository: https://github.com/raman04-byte/Cycle_App

Prerequisites:

Before we jump into building our Cycle application using Flutter and the MVC architecture, you'll need to ensure that you have the following assets and folder structure in place.

Assets:

Your assets are essential components of your project. These include images, fonts, and any other resources that your app will utilize. Make sure you have organized these assets appropriately within your project folder.

Folder Structure:

A well-structured project folder is key to keeping your code organized and maintainable. Here's the suggested folder structure for your Cycle application:

With your assets and folder structure in place, you're now ready to start building your Cycle application. In my upcoming videos, we will explore each component in-depth and guide you through the process of developing a robust Flutter app using the MVC architecture.

Stay tuned for more insights, and let's bring your Cycle application to life!

Flutter docs Navigation

raman04-byte — Fri, 13 Oct 2023 02:30:00 +0000

This blog is very long to read, I have summarized every bit made the video of it, and have provided all the code on GitHub, check them out:

GitHub: https://github.com/raman04-byte/flutter_docs

Video: https://youtu.be/FwBSQoKzEkE

In this blog, we are going to make Flutter Docs NavigationBar

In this whole project, I am going to follow MVC architecture

Let's talk about MVC architecture first and get to know what it is:

MVC (Model-View-Controller) is a popular architectural pattern used in software development to separate the concerns of an application into three distinct components: Model, View, and Controller. While Flutter primarily promotes using the "Flutter way" architecture (similar to the MVVM pattern), you can still implement an MVC-like structure if it aligns with your project's requirements and design principles.

Here's a brief explanation of how you can apply the MVC architecture in Flutter:

Model (M):

The Model represents the application's data and business logic. It is responsible for data storage, retrieval, and manipulation.

You can create Dart classes in a Flutter app to define your data models. These classes represent the data you are working with, such as user profiles, items in a shopping cart, or any other application-specific data.

Model classes do not depend on the UI or user interactions. They should be as independent and reusable as possible.

View (V):

The View is responsible for rendering the user interface (UI) and displaying data from the Model to the user. In Flutter, this is typically done using widgets.

Each screen or page in your Flutter app can have its own View component, which includes the UI layout and design.

Widgets like Text, Image, ListView, and custom widgets can be used to visually represent your app's screens.

Controller (C):

The Controller acts as an intermediary between the Model and the View. It handles user input, processes requests, and updates the Model or View accordingly.

In Flutter, you can use state management techniques like StatefulWidget or third-party state management libraries (e.g., Provider, Bloc, Riverpod) to implement the Controller part of MVC.

The Controller can handle user interactions, validate input, make API calls, and update the Model and View as needed.

Let's go to the development state of this navBar application:

First, let's take a look on pubspec.yaml file:

Use the latest version of the package.

Let's look for the folder structure that we are going to follow during this development of the Navigation bar:

Let's look into main.dart file:

import 'package:flutter/material.dart';
import 'app.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

This Flutter code is the entry point for a mobile application. It imports necessary Flutter material design widgets and a custom "app.dart" file. The main function ensures proper initialization of the Flutter framework with WidgetsFlutterBinding.ensureInitialized(). It then launches the app by running an instance of the MyApp widget using runApp(const MyApp()). The MyApp widget, defined in "app.dart," is responsible for constructing the user interface of the application. This code sets the stage for a Flutter app, ensuring framework readiness and establishing the root widget, which is essential for building the app's graphical user interface.

Clone the repo from GitHub and try to understand the architecture

Let's dive into the development of the navigation bar:

homepage.dart:

import 'package:docs_flutter/feature/home/template/home_template.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: HomeTemplate(),
    );
  }
}

The code defines a Flutter widget for a home page.

It imports "home_template.dart" for the home page's template and Flutter material design widgets.

The HomePage class extends StatefulWidget, representing the home page.

The constructor for HomePage should accept a key parameter but has a typo.

The createState method returns an instance of the _HomePageState class to manage state.

_HomePageState manages the mutable state of HomePage.

The build method returns a Scaffold with a HomeTemplate as the body, structuring the home page's content.

hometemplate.dart :

import 'package:docs_flutter/feature/home/template/home_row.dart';
import 'package:flutter/material.dart';

class HomeTemplate extends StatefulWidget {
  const HomeTemplate({super.key});

  @override
  State<HomeTemplate> createState() => _HomeTemplateState();
}

class _HomeTemplateState extends State<HomeTemplate> {
  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        HomeRow(),
      ],
    );
  }
}

This Dart code defines a Flutter widget named HomeTemplate for a home page.

It imports the "home_row.dart" file and Flutter's material design widgets.

The HomeTemplate class extends StatefulWidget, representing the template for the home page.

homerow.dart :

class HomeRow extends StatefulWidget {
  const HomeRow({super.key});

  @override
  State<HomeRow> createState() => _HomeRowState();
}

class _HomeRowState extends State<HomeRow> {
  TextEditingController textController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(
        vertical: Dimensions.scaleH(10),
        horizontal: Dimensions.scaleW(5),
      ),
      child: Row(
        children: [
          MouseRegion(
            cursor: SystemMouseCursors.click,
            child: SvgPicture.asset(
              Assets.image1,
              height: Dimensions.scaleH(37),
            ),
          ),
          const Spacer(),
          DropButton(
            items: const [
              'Mobile',
              'Web',
              'Desktop',
              'Embedded',
            ],
            title: 'Multi-Platform',
            height: Dimensions.scaleH(40),
            width: Dimensions.scaleH(135),
            menuHeight: Dimensions.scaleH(35),
          ),
          DropButton(
            items: const [
              'Learn',
              'Flutter Favorites',
              'Packages',
              'Monetization',
              'Games',
              'News'
            ],
            title: 'Development',
            height: Dimensions.scaleH(40),
            width: Dimensions.scaleW(33),
            menuHeight: Dimensions.scaleH(40),
          ),
          DropButton(
            items: const [
              'Community',
              'Events',
              'Culture',
            ],
            title: 'Ecosystem',
            height: Dimensions.scaleH(40),
            width: Dimensions.scaleW(25),
            menuHeight: Dimensions.scaleH(35),
          ),
          Padding(
            padding: EdgeInsets.symmetric(
              horizontal: Dimensions.scaleW(5),
            ),
            child: Text(
              'Showcase',
              style: TextStyle(
                color: Colors.black,
                fontSize: Dimensions.scaleH(15),
              ),
            ),
          ),
          DropButton(
            items: const [
              "What's new",
              'Editor Support',
              'Hot reload',
              'Profiling',
              'Install Flutter',
              'DevTools',
              'Cookbook',
              'Codelabs'
            ],
            title: 'Docs',
            height: Dimensions.scaleH(40),
            width: Dimensions.scaleW(30),
            menuHeight: Dimensions.scaleH(35),
          ),
          AnimSearchBar(
            helpText: 'Search',
            width: Dimensions.scaleW(40),
            textController: textController,
            prefixIcon: const Icon(
              Icons.search,
              color: Color(0xFF6e7274),
            ),
            onSuffixTap: () {
              setState(() {
                textController.clear();
              });
            },
            onSubmitted: (value) {},
          ),
          const AppBarIcon(
            icon: SimpleIcons.twitter,
          ),
          const AppBarIcon(
            icon: SimpleIcons.youtube,
          ),
          const AppBarIcon(
            icon: SimpleIcons.medium,
          ),
          const AppBarIcon(
            icon: SimpleIcons.github,
          ),
          MouseRegion(
            cursor: SystemMouseCursors.click,
            child: Container(
              height: Dimensions.scaleH(38),
              width: Dimensions.scaleW(30),
              alignment: Alignment.center,
              decoration: const BoxDecoration(
                color: Color(0xFF1389fd),
              ),
              child: Text(
                "Get started",
                style: TextStyle(
                    color: Colors.white,
                    fontSize: Dimensions.scaleH(15),
                    fontWeight: FontWeight.w500),
              ),
            ),
          )
        ],
      ),
    );
  }
}

Let's break down the code and explain each part:

class HomeRow extends StatefulWidget: This defines a class called HomeRow, which extends StatefulWidget. This means that HomeRow is a stateful widget and can have mutable state that can change over time.

const HomeRow({super.key});: This is the constructor for the HomeRow class. It takes a named parameter key, which is not required, and sets it to super.key. The super keyword is used to refer to the base class constructor, which is part of the StatefulWidget class.

@override State createState() => _HomeRowState();: This method is an override of the createState method. It is used to create and return an instance of the state class for this widget, which is _HomeRowState. In Flutter, the state class is where you define the mutable state and the build method to describe the UI for the widget.

class _HomeRowState extends State: This defines the state class for the HomeRow widget. It extends State and is responsible for maintaining the mutable state of the widget.

TextEditingController textController = TextEditingController();: This line declares an instance of TextEditingController called textController. This controller is typically used to manage and control text input widgets like text fields.

@override Widget build(BuildContext context) { ... }: This is the build method of the state class. It is called whenever the widget needs to be built or rebuilt. Inside this method, you define the layout and structure of the widget's UI.

The UI structure consists of a Padding widget that wraps a Row widget.

Inside the Row, there are several child widgets, including MouseRegion, SvgPicture, Spacer, DropButton, Text, AnimSearchBar, AppBarIcon, and Container widgets.

These widgets represent various UI elements, such as icons, drop-down menus, search bars, and buttons, and they are arranged in a row layout.

Various properties like dimensions, text styles, and colors are customized based on the Dimensions class or other constants defined in the application.

The HomeRow widget is intended to be part of a larger Flutter app's user interface and provides a row of interactive and informational elements for the user to interact with. The specifics of how this widget behaves and interacts with the rest of the app would depend on the rest of the code in the app.

drop_button.dart :

import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';

import '../../../constants/dimes.dart';

class DropButton extends StatefulWidget {
  final String title;
  final List<String> items;
  final double height;
  final double menuHeight;
  final double width;
  const DropButton({
    super.key,
    required this.items,
    required this.title,
    required this.height,
    required this.width,
    required this.menuHeight,
  });

  @override
  State<DropButton> createState() => _DropButtonState();
}

class _DropButtonState extends State<DropButton> {
  String? selectedValue;
  @override
  Widget build(BuildContext context) {
    return DropdownButton2(
      underline: Container(
        color: Colors.white,
      ),
      isExpanded: true,
      hint: Text(
        widget.title,
        style: TextStyle(
          color: const Color(0xff000000),
          fontSize: Dimensions.scaleH(15),
        ),
      ),
      items: widget.items
          .map(
            (String item) => DropdownMenuItem<String>(
              value: item,
              child: Text(
                item,
                style: TextStyle(
                  fontSize: Dimensions.scaleH(13),
                ),
              ),
            ),

          )
          .toList(),
      value: selectedValue,
      onChanged: (String? value) {
        setState(() {});
      },
      buttonStyleData: ButtonStyleData(
        height: widget.height,
        width: widget.width,
      ),
      menuItemStyleData: MenuItemStyleData(
        height: widget.menuHeight,
      ),
    );
  }
}

Let's break down the code and understand how this widget works:

Import Statements:

import 'package:dropdown_button2/dropdown_button2.dart' imports the DropdownButton2 widget from the dropdown_button2 package.

import 'package:flutter/material.dart' imports Flutter's material design widgets, which are used to create the user interface.

Import Custom Constants:

import '../../../constants/dimes.dart' imports constants from a local file, likely containing constants related to dimensions.

DropButton Class:

This class is a StatefulWidget, which means it can hold mutable state.

Constructor: The constructor of this widget takes several parameters:

key: A named parameter for the widget's key. However, there is a syntax issue here, as super.key is not the correct way to set the key. Instead, you can directly pass Key to the constructor and set it as key: key.

title: A required string parameter representing the title of the dropdown.

items: A required list of strings representing the items to display in the dropdown.

height: A required double parameter representing the height of the button part of the dropdown.

menuHeight: A required double parameter representing the height of the dropdown menu.

width: A required double parameter representing the width of the button part of the dropdown.

The constructor is used to configure the initial properties of the DropButton.

_DropButtonState Class:

This class represents the state for the DropButton widget and extends State.

It has a selectedValue property to store the currently selected item in the dropdown. It's initialized as nullable (String?) because initially, no item is selected.

The build the method is overridden to define the UI of the DropButton widget.

build Method:

Inside the build method, a DropdownButton2 widget is created. DropdownButton2 is likely a custom dropdown widget from the dropdown_button2 package.

The properties of the DropdownButton2 widget is configured as follows:

underline: This property defines the style of the underline, and in this case, it's set to a white color.

isExpanded: The dropdown should expand to fill the available horizontal space.

hint: This is the text displayed when no item is selected in the dropdown. It uses the title property from the widget and a specific text style.

items: The list of items to display in the dropdown menu. The items are constructed from the widget.items list and have specific text styles.

value: This is set to the selectedValue from the widget's state, indicating the currently selected item.

onChanged: This function is called when an item is selected. It is currently empty and doesn't do anything.

buttonStyleData: This property defines the height and width of the dropdown button.

menuItemStyleData: This property defines the height of each item in the dropdown menu.

This DropButton widget allows you to create customized dropdown buttons with various configuration options, making it easier to integrate dropdowns with specific styles and behaviors into your Flutter app.

appbar_icon.dart :

import 'package:docs_flutter/constants/dimes.dart';
import 'package:flutter/material.dart';

class AppBarIcon extends StatefulWidget {
  final IconData icon;
  const AppBarIcon({super.key, required this.icon});

  @override
  State<AppBarIcon> createState() => _AppBarIconState();
}

class _AppBarIconState extends State<AppBarIcon> {
  bool isHovered = false;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(
        horizontal: Dimensions.scaleW(2),
      ),
      child: MouseRegion(
        cursor: SystemMouseCursors.click,
        onEnter: (event) {
          setState(() {
            isHovered = true;
          });
        },
        onExit: (event) {
          setState(() {
            isHovered = false;
          });
        },
        child: Icon(
          widget.icon,
          color: isHovered ? Colors.black : const Color(0xFF6e7274),
        ),
      ),
    );
  }
}

Let's break down the code to understand how this widget works:

Import Statements:

import 'package:docs_flutter/constants/dimes.dart' imports constants related to dimensions from a local file.

import 'package:flutter/material.dart' imports Flutter's material design widgets.

AppBarIcon Class:

This class is a StatefulWidget, indicating that it can have mutable state.

Constructor: The constructor of this widget takes two parameters:

key: A named parameter for the widget's key.

icon: A required parameter of type IconData, representing the icon to be displayed.

_AppBarIconState Class:

This class represents the state for the AppBarIcon widget and extends State.

It has a isHovered property, which is a boolean to keep track of whether the mouse pointer is hovering over the icon.

build Method:

Inside the build method, the widget is defined.

It consists of a Padding widget, which provides padding around its child.

Inside the Padding, there is a MouseRegion widget. The MouseRegion widget is used to capture mouse events and change the state when the mouse pointer enters or exits the region.

The properties of the MouseRegion widget include:

cursor: It changes the cursor appearance to a click cursor when hovering over the region.

onEnter: This is a callback function that gets executed when the mouse pointer enters the region. In this callback, the isHovered state is set to true.

onExit: This callback gets executed when the mouse pointer exits the region, and it sets the isHovered state to false.

Inside the MouseRegion, there is an Icon widget. The icon's color is conditionally set based on the isHovered state:

If the mouse pointer is hovering (isHovered is true), the icon color is set to Colors.black.

If not hovering, the icon color is set to a specific gray color (Color(0xFF6e7274)).

This AppBarIcon widget is designed to display an icon that changes color when hovered over. It's useful for creating interactive and visually responsive icons in an app's app bar or similar navigation areas. The color change provides a visual cue to the user when interacting with the icon.

Hence our NavigationBar is completed

Transforming Figma Designs into a Flutter App: A Journey

raman04-byte — Tue, 10 Oct 2023 02:30:00 +0000

Introduction:
Designing a mobile application is an intricate process that begins with a vision. In our case, the vision was a sleek and intuitive cycling application. To bring this vision to life, we embarked on a journey that started in Figma and ended in Flutter, and we're excited to share our experience with you.

Designing in Figma:
We began by crafting the user interface (UI) and user experience (UX) in Figma. This stage allowed us to meticulously plan every element of our cycling app, from the onboarding screens to the in-ride statistics display. Figma provided a collaborative platform for our team to iterate and refine the design until it was just right.

Translating to Flutter:
Once our Figma designs were finalized, it was time to make them a reality. Flutter, Google's UI toolkit for building natively compiled applications, was our tool of choice. We started by creating widgets that mirrored our Figma components, ensuring pixel-perfect precision in the transition from design to development.

Challenges and Solutions:
Of course, no journey is without its challenges. We encountered issues with responsiveness, animations, and state management along the way. However, through research, experimentation, and collaboration, we overcame these obstacles and learned valuable lessons that we share in this post.

Open Source Collaboration:
Our project is open source, meaning you can access the codebase on GitHub and even contribute if you'd like. We believe in the power of community-driven development, and we invite developers and designers alike to join us in perfecting our cycling app.

Conclusion:
The transformation from Figma designs to a fully functional Flutter app was a rewarding experience. We've not only created a user-friendly cycling application but also enriched our knowledge in design, development, and open-source collaboration.

Explore the Project:

GitHub Repository: https://github.com/raman04-byte

Video Tutorial: https://youtu.be/ATIymbA_sYo

We hope this blog post provides insight into our journey and inspires you in your own design-development endeavors. Thank you for joining us on this ride!

Flutter Documentation Clone Project: A New Learning Adventure Begins!

raman04-byte — Wed, 04 Oct 2023 08:30:00 +0000

Hey, Flutter community! 🚀

I am excited to share some thrilling news with you all today. I am embarking on a new journey, one that's bound to make learning Flutter even more exciting and accessible. I am in the process of creating a clone of the official Flutter documentation website using Flutter Web, and I can't wait to give you a sneak peek into what's coming.

The Vision
As a Flutter enthusiast, I've always admired the official Flutter documentation for its clarity and comprehensiveness. However, I wanted to take this a step further by creating a Flutter documentation clone that's not just informative but also interactive and user-friendly. Here's what you can expect:

Interactive Code Examples
I am going to make sure that learning Flutter becomes more hands-on. The clone will feature interactive code examples that you can experiment with right on the website. No need to switch back and forth between the documentation and your code editor!
User-Friendly Interface
The clone's user interface will be designed to make navigation a breeze. I want you to easily find what you're looking for and enjoy browsing through the documentation.
Community Collaboration
I believe that the Flutter community is a valuable resource, and I want this project to reflect that. I'll be open to contributions, suggestions, and feedback from fellow Flutter enthusiasts like you. Together, we can create something truly amazing.

Why Clone the Documentation?
You might wonder why I'm creating a clone of the official documentation when it already exists. Well, the idea is to provide an alternative that enhances the learning experience. The official documentation is fantastic, but offering a different perspective, interactivity, and community involvement can be incredibly beneficial.

What's Next?
I am currently in the development phase and working hard to bring this project to life. I can't wait to share it with you all and see how it helps you in your Flutter journey.

Stay tuned for updates! I'll be announcing the project's launch date soon, and I hope you'll join me on this exciting adventure. Don't forget to share this news with your fellow Flutter developers. Let's make learning Flutter even more awesome together!

Until then, happy coding, and stay Flutter-tastic! 🚀📚

Note: Keep an eye out for more details in the coming days.
Video: https://youtu.be/ocTsQcL-UjI

My Last Blog

raman04-byte — Fri, 29 Sep 2023 12:30:00 +0000

Introduction:

Hello, my fellow developers and Flutter enthusiasts. Today, I find myself facing an unexpected twist in my journey with Appwrite. It’s with a tinge of sadness that I share this update, as it impacts my plans for creating a Flutter-based website for Appwrite.

A UI Transformation, but the Same Ecosystem:

Recently, Appwrite underwent a major transformation that took everyone by surprise — a complete revamp of their user interface. The changes were breathtaking, introducing a fresh and modern look to the platform. However, it’s essential to clarify that these updates were largely cosmetic. The core ecosystem of Appwrite remains unchanged, with its powerful backend features and capabilities intact.

The Challenge: Adapting to the New UI

While I wholeheartedly embrace Appwrite’s commitment to innovation, this UI overhaul presents an unexpected challenge. As a Flutter enthusiast, I had been excitedly working on building a website using Flutter Web to showcase my capabilities. However, the dramatic shift in the platform’s appearance means that my existing plans are no longer feasible.

A Flutter Enthusiast’s Dilemma:

It’s with a heavy heart that I must acknowledge the limitations this change has placed on my project. As a developer, I thrive on staying current and providing valuable content to the community. Unfortunately, the Appwrite UI transformation has created a roadblock that I did not anticipate.

A Pause, Not a Full Stop:

While my initial plans to create a Flutter-based Appwrite website may need to be put on hold, I want to emphasize that this is not a permanent setback. I am committed to exploring new opportunities and ways to contribute to the Appwrite community.

Exploring New Avenues:

In the meantime, I will be exploring different aspects of the Appwrite ecosystem. I am confident that there are still many exciting opportunities to create valuable content and share insights with you all.

Conclusion:

In conclusion, while the recent UI transformation of Appwrite has presented an unforeseen challenge to my Flutter-based project, it is not the end of my journey with this incredible platform. I remain dedicated to finding innovative ways to showcase my capabilities and provide valuable resources to the developer community.

Thank you for your continued support and understanding as I navigate this unexpected roadblock. Together, we will continue to explore the vast possibilities that Flutter offers to developers around the world. Stay tuned for new adventures in the world of Flutter!

With appreciation and determination, Raman

Video: https://youtu.be/WR1XaZjAv-I

Making of next element of the @Appwrite website

raman04-byte — Thu, 28 Sep 2023 16:28:00 +0000

This blog is very long to read, I have summarized every bit made the video of it, and have provided all the code on GitHub, check them out:

GitHub: https://github.com/raman04-byte/appwrite_webpage

Video: https://youtu.be/I75RalITPYA

In this blog, we are going to make an Appwrite Website element:

In this whole project, I am going to follow MVC architecture

Let's dive into code, I would like you to read my before blog where I have given the folder structure and the base of the application, let's look at the code that will help us make this:

I have added button.dart file so that we can import this file and use this again and again without writing the code repeatedly.

import 'package:flutter/material.dart';

import '../constants/dimes.dart';

class CommonButton extends StatefulWidget {
  final String text;
  final double height;
  final double width;
  const CommonButton({super.key, required this.text,required this.height,required this.width});

  @override
  State<CommonButton> createState() => _CommonButtonState();
}

class _CommonButtonState extends State<CommonButton> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: widget.height,
      width: widget.width,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(50),
          color: const Color(0xFFc7d8eb)),
      alignment: Alignment.center,
      child: Text(
        widget.text,
        style: TextStyle(
            color: const Color(0xFF171d37), fontSize: Dimensions.scaleH(15)),
      ),
    );
  }
}

This code defines a CommonButton widget that represents a button with customizable text, height, and width. Here's an explanation of the code:

CommonButton is a StatefulWidget that requires three parameters:

text: The text to be displayed on the button.

height: The height of the button.

width: The width of the button.

_CommonButtonState manages the state of the widget.

In the build method:

A Container widget is used to create the button. It has a height and width determined by the widget.height and widget.width parameters.

The button has a circular border-radius, giving it a rounded appearance, and a background color specified as const Color(0xFFc7d8eb).

The content of the button is centered using the alignment property.

Inside the container, a Text widget displays the widget.text. The text is styled with a specific color (const Color(0xFF171d37)) and font size, which is calculated based on the Dimensions.scaleH(15) value.

Overall, this code creates a reusable CommonButton widget that allows you to create buttons with customizable text, height, and width. The appearance of the button can be adjusted using the provided parameters.

Here is the updation in home_template.dart file:

import 'package:appwrite_web/feature/home/template/navbar_template.dart';
import 'package:flutter/material.dart';

import 'appwrite_template.dart';

class HomeTemplate extends StatefulWidget {
  const HomeTemplate({super.key});

  @override
  State<HomeTemplate> createState() => _HomeTemplateState();
}

class _HomeTemplateState extends State<HomeTemplate> {
  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        NavbarContainer(),
        // This new Template is added here (Appwrite Template)
        AppwriteTemplate(),
      ],
    );
  }
}

Now let's dive into our AppwriteTemplate() class which has the file name of appwrite_template.dart :

import 'package:appwrite_web/common_widgets/button.dart';
import 'package:appwrite_web/constants/colors.dart';
import 'package:flutter/material.dart';

import '../../../constants/dimes.dart';

class AppwriteTemplate extends StatefulWidget {
  const AppwriteTemplate({super.key});

  @override
  State<AppwriteTemplate> createState() => _AppwriteTemplateState();
}

class _AppwriteTemplateState extends State<AppwriteTemplate> {
  final double _fontPadding = 68;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(
        top: Dimensions.scaleH(60),
      ),
      child: Column(
        children: [
          MouseRegion(
            cursor: SystemMouseCursors.click,
            child: Container(
              width: Dimensions.scaleW(35),
              decoration: BoxDecoration(
                color: const Color(0xFF34b86d),
                borderRadius: BorderRadius.circular(15),
              ),
              alignment: Alignment.center,
              child: Padding(
                padding: const EdgeInsets.all(4.0),
                child: Text(
                  'Appwrite 1.4 is here!',
                  style: TextStyle(
                      color: Colors.white, fontSize: Dimensions.scaleH(13)),
                ),
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: Dimensions.scaleH(15)),
            child: MouseRegion(
              cursor: SystemMouseCursors.text,
              child: Text(
                "Build Fast. Scale Big. All in One Place.",
                style: TextStyle(
                  color: AppColor.fontColor,
                  fontWeight: FontWeight.bold,
                  fontSize: Dimensions.scaleH(40),
                ),
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(
                top: Dimensions.scaleH(15),
                left: Dimensions.scaleW(_fontPadding),
                right: Dimensions.scaleW(_fontPadding)),
            child: MouseRegion(
              cursor: SystemMouseCursors.text,
              child: Text(
                "Appwrite is a backend platform for developing Web, Mobile, and Flutter applications. Built with the open source community and optimized for developer experience in the coding languages you love.",
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: AppColor.fontColor,
                  fontSize: Dimensions.scaleH(15),
                ),
              ),
            ),
          ),
          MouseRegion(
            cursor: SystemMouseCursors.click,
            child: Padding(
              padding: EdgeInsets.only(top: Dimensions.scaleH(30)),
              child: CommonButton(
                text: "Get Started",
                height: Dimensions.scaleH(50),
                width: Dimensions.scaleW(33),
              ),
            ),
          )
        ],
      ),
    );
  }
}

Let's go into detail about the AppwriteTemplate code:

AppwriteTemplate Widget:

This widget is intended to represent a template for displaying information about Appwrite, which is a backend platform, along with a call-to-action button.

_AppwriteTemplateState Class:

This class manages the internal state of the AppwriteTemplate widget.

Padding Widget (Top Spacing):

The top-level Padding widget adds vertical spacing to the content within the template. It is used Dimensions.scaleH(60) to determine the top padding, making it responsive based on screen size.

Column Widget:

Inside the Padding, there is a Column widget that organizes the content vertically.

Green Banner:

A MouseRegion widget is used to detect mouse click events on a green-colored container. It displays the text "Appwrite 1.4 is here!" in white. This is likely an informational banner or announcement.

The banner has a green background color (Color(0xFF34b86d)) and rounded corners due to BorderRadius.circular(15).

The text is centered within the container and styled with a white color and a font size based on Dimensions.scaleH(13).

Headline:

Below the green banner, there's another MouseRegion containing a headline that reads "Build Fast. Scale Big. All in One Place."

This text is styled with a larger font size, a bold font weight, and a specific color.

Description:

Following the headline, there's a MouseRegion contains a paragraph of text that describes Appwrite as a backend platform.

The text is centered within the region and styled with smaller font size.

"Get Started" Button:

At the bottom of the Column, there's a MouseRegion contains a call-to-action button labeled "Get Started."

This button is created using the CommonButton widget.

The button's appearance can be customized with parameters like text, height, and width.

Overall, this AppwriteTemplate provides a structured layout for presenting information about Appwrite, including a banner, headline, description, and a button to encourage users to get started. The design and responsiveness of the template can be adjusted using the provided parameters and styles.

This is what we have created till now by comparing both the Appwrite website and our webpage in Flutter WebView:

Appwrite Website:

Flutter WebView:

There is always a scope for improvement and I am trying my best to make this WebView pixel perfect, hence if you want to contribute, You are most Welcome to my GitHub

Making the navbar of the Appwrite website

raman04-byte — Wed, 27 Sep 2023 13:00:00 +0000

This blog is very long to read, I have summarized every bit made the video of it, and have provided all the code on GitHub, check them out:

GitHub: https://github.com/raman04-byte/appwrite_webpage

Video: https://youtu.be/aW6firJJxSU

In this blog, we are going to make appwrite NavigationBar

In this whole project, I am going to follow MVC architecture

Let's talk about MVC architecture first and get to know what it is:

Here's a brief explanation of how you can apply the MVC architecture in Flutter:

Model (M):

The Model represents the application's data and business logic. It is responsible for data storage, retrieval, and manipulation.

Model classes do not depend on the UI or user interactions. They should be as independent and reusable as possible.

View (V):

The View is responsible for rendering the user interface (UI) and displaying data from the Model to the user. In Flutter, this is typically done using widgets.

Each screen or page in your Flutter app can have its own View component, which includes the UI layout and design.

Widgets like Text, Image, ListView, and custom widgets can be used to visually represent your app's screens.

Controller (C):

The Controller acts as an intermediary between the Model and the View. It handles user input, processes requests, and updates the Model or View accordingly.

In Flutter, you can use state management techniques like StatefulWidget or third-party state management libraries (e.g., Provider, Bloc, Riverpod) to implement the Controller part of MVC.

The Controller can handle user interactions, validate input, make API calls, and update the Model and View as needed.

Let's go to the development state of this navBar application:

First, let's take a look on pubspec.yaml file:

name: appwrite_web
description: A new Flutter project.

publish_to: 'none' 

version: 1.0.0+1

environment:
  sdk: '>=3.1.2 <4.0.0'

dependencies:
  flutter:
    sdk: flutter


  cupertino_icons: ^1.0.1
  get: ^4.6.6
  flutter_svg: ^2.0.7
  google_fonts: ^6.1.0
  simple_icons: ^7.10.0
  flutter_switch: ^0.3.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0
flutter:

  uses-material-design: true

  assets:
    - assets/
    - assets/images/
  fonts:
    - family: Inter
      fonts:
        - asset: assets/fonts/Inter-Bold.ttf
        - asset: assets/fonts/Inter-Medium.ttf
        - asset: assets/fonts/Inter-Regular.ttf
        - asset: assets/fonts/Inter-SemiBold.ttf

    - family: Poppins
      fonts:
        - asset: assets/fonts/Poppins-Bold.ttf
    - family: SourceCodePro
      fonts:
        - asset: assets/fonts/SourceCodePro-Regular.ttf

Use the latest version of the package.

Let's look for the folder structure that we are going to follow during this development of the Appwrite Navigation bar:

Let's dive into our main.dart file:

import 'package:flutter/material.dart';

import 'app.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const App());
}

The code is the entry point for a Flutter application. It initializes Flutter's widget binding, ensuring proper initialization. It then runs the App widget as the root of the app. The App widget is likely defined in the imported app.dart file and serves as the main structure for the Flutter application, incorporating the app's logic and UI components.

Let's dive into app.dart file:

import 'package:appwrite_web/routing/namesroute.dart';
import 'package:appwrite_web/routing/webrounting.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';

class App extends StatelessWidget {
  const App({super.key});


  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(fontFamily: GoogleFonts.poppins().fontFamily),
      getPages: WebRouting().getPages(),
      initialRoute: NamesRoutes.home,
    );
  }
}

The code above defines a Flutter application named "App" using the GetX package for state management and routing. Here's a summary of what's happening in the code:

Import Statements:

The code imports various Flutter and external packages, including appwrite_web, get, and google_fonts.

App Class:

This is a Stateless widget that represents the root widget of the Flutter application.

build Method:

Inside the build method, a GetMaterialApp widget is created. This widget is used for setting up the application's core configuration.

GetMaterialApp Configuration:

debugShowCheckedModeBanner: false: Disables the debug banner in the app.

title: 'Flutter Demo': Sets the title of the app.

theme: ThemeData(fontFamily: GoogleFonts.poppins().fontFamily): Defines the app's theme. It appears to use the Google Fonts package to set the default font family to "Poppins" for the entire app.

getPages: WebRouting().getPages(): Specifies the app's routes and pages. It seems to use a WebRouting class to define the routing configuration.

initialRoute: NamesRoutes.home: Sets the initial route for the app, likely pointing to the "home" route defined in NamesRoutes.

Overall, the code initializes a Flutter app with a specific theme and routing configuration using the GetX package. The routing setup appears to be based on the WebRouting class and the app starts with the "home" route defined in NamesRoutes.

Let's look into the routing of the web application:

Since we have only one screen now our routing code will look like this using the Get package:

namesroute.dart:

class NamesRoutes {
  static const String home = '/homeScreen';
}

webrouting.dart:

import 'package:appwrite_web/feature/home/screen/homepage.dart';
import 'package:appwrite_web/routing/namesroute.dart';
import 'package:get/get.dart';

class WebRouting {
  List<GetPage<dynamic>> getPages() {
    return [
      GetPage(
        name: NamesRoutes.home,
        page: ()=> const HomePage(),
      ),
    ];
  }
}

The code above defines the routing configuration for a Flutter web application using the GetX package. Here's a summary of what's happening in the code:

Import Statements:

The code imports several packages, including appwrite_web, get, and specific Dart files related to routing and screen navigation.

WebRouting Class:

This class is responsible for defining the routing configuration for the application.

getPages Method:

getPages is a method that returns a list of GetPage objects. These objects define the routes and associated screens/pages for the application.

Route Configuration:

Inside the getPages method, a list of GetPage objects are created to specify the available routes in the application.

The provided code includes one route configuration:

GetPage for the "home" route:

name: NamesRoutes.home: Assigns a name to the route, which is likely defined in the NamesRoutes file.

page: () => const HomePage(): Specifies the page/screen associated with the "home" route. In this case, it points to the HomePage widget, which is marked as a constant (const).

Overall, this code defines the routing configuration for the Flutter web application, associating the "home" route with the HomePage widget. Additional routes and pages can be added to the getPages method as needed to navigate between different parts of the application.

Let's dive into how we can make our webpage dynamic in nature by making it responsive:

// ignore_for_file: deprecated_member_use

import 'dart:ui';

import 'package:flutter/material.dart';

class Dimensions {
  static double get screenHeight {
    return WidgetsBinding.instance.window.physicalSize.height /
        window.devicePixelRatio;
  }

  static double get screenWidth {
    return WidgetsBinding.instance.window.physicalSize.width /
        window.devicePixelRatio;
  }

  static double scaleH(double value) {
    return value * ((screenHeight) / 740);
  }

  static double scaleW(double value) {
    return value * ((screenWidth) / 360);
  }
}

The code above defines a Dart class named Dimensions that provides utility functions for handling screen dimensions and scaling values in a Flutter application. Here's a summary of what this code does:

Import Statements:

The code imports the dart:ui and package:flutter/material.dart libraries.

Dimensions Class:

Dimensions is a utility class used for managing screen dimensions and scaling in the application.

screenHeight and screenWidth Properties:

These are static properties that calculate the height and width of the screen, respectively, taking into account the device's pixel ratio.

They use WidgetsBinding.instance.window.physicalSize to get the physical size of the window and divide it by window.devicePixelRatio to obtain the screen dimensions.

scaleH and scaleW Methods:

These are static methods that allow for scaling values based on screen dimensions.

scaleH takes a value as input and scales it proportionally based on the screen's height (740 is a reference height used for scaling).

scaleW takes a value as input and scales it proportionally based on the screen's width (360 is a reference width used for scaling).

Overall, this utility class can be used to make your Flutter application responsive by scaling values according to the screen dimensions. It's often used to create layouts and designs that adapt well to different screen sizes and resolutions.

Now our main part is here, let's look into our main code which we are going make:

homepage.dart:

import 'package:appwrite_web/feature/home/template/home_template.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      backgroundColor: Color(0xFF181c2c),
      body: HomeTemplate(),
    );
  }
}

This code defines a Flutter widget named HomePage and its corresponding state, HomePageState. Here's a summary of what this code does:

Import Statements:

The code imports package:appwrite_web/feature/home/template/home_template.dart for the HomeTemplate widget and package:flutter/material.dart for Flutter components.

HomePage Widget:

HomePage is a StatefulWidget, which means it can have a mutable state. It's used to represent a specific page or screen in the Flutter app.

HomePageState Class:

HomePage has an associated state class, HomePageState, which extends State. This class is responsible for defining the build method and handling the state of the HomePage widget.

build Method:

The build method is overridden to return a Scaffold widget.

The Scaffold widget provides the basic structure for a screen, including app bars, navigation drawers, and the main content area.

backgroundColor:

The Scaffold has a background color set to Color(0xFF181c2c), which appears to be a custom color defined in hexadecimal notation.

body:

The body of the Scaffold is set to a HomeTemplate widget. This means that the content of this home page is provided by the HomeTemplate widget.

HomeTemplate:

The HomeTemplate widget is likely responsible for defining the layout and content of the home page, but its implementation details are not shown in this code snippet.

In summary, this code sets up a HomePage widget with a dark background color and associates it with a HomeTemplate to define the content and layout of the home page within a Scaffold structure.

home_template.dart:

import 'package:appwrite_web/feature/home/template/navbar_template.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';


class HomeTemplate extends StatefulWidget {
  const HomeTemplate({super.key});

  @override
  State<HomeTemplate> createState() => _HomeTemplateState();
}

class _HomeTemplateState extends State<HomeTemplate> {
  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        NavbarContainer()
      ],
    );
  }
}

The build method of the HomeTemplate widget returns a Column widget with a single child, which is the NavbarContainer. This structure suggests that the HomeTemplate is likely used to define the layout for a page, and it includes a navigation bar as part of its content.

navbar_template.dart :

import 'package:flutter/material.dart';

import '../../../constants/assets.dart';
import '../../../constants/dimes.dart';
import '../widget/appwrite_image.dart';
import '../widget/github.dart';
import '../widget/mouse_widget.dart';
import '../widget/switch.dart';

class NavbarContainer extends StatefulWidget {
  const NavbarContainer({super.key});

  @override
  State<NavbarContainer> createState() => _NavbarContainerState();
}

class _NavbarContainerState extends State<NavbarContainer> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
          height: Dimensions.scaleH(100),
          color: const Color(0xFF171d37),
          child: Padding(
            padding: EdgeInsets.symmetric(
              horizontal: Dimensions.scaleW(12),
              vertical: Dimensions.scaleH(20),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    const AppWriteImage(
                      imagePath: Assets.image1,
                    ),
                    Padding(
                      padding: EdgeInsets.only(left: Dimensions.scaleW(7)),
                      child: const Row(
                        children: [
                          MouseEvent(text: "Docs"),
                          MouseEvent(text: "Community"),
                          MouseEvent(text: "Pricing"),
                          GitHubLogo()
                        ],
                      ),
                    ),
                  ],
                ),
                Row(
                  children: [
                    const ToogleSwitch(),
                    MouseRegion(
                      cursor: SystemMouseCursors.click,
                      child: Padding(
                        padding: EdgeInsets.only(
                          left: Dimensions.scaleW(10),
                          right: Dimensions.scaleH(10),
                        ),
                        child: Text(
                          "Sign In",
                          style: TextStyle(
                              color: const Color(0xFFc4d8eb),
                              fontSize: Dimensions.scaleH(15)),
                        ),
                      ),
                    ),
                    MouseRegion(
                      cursor: SystemMouseCursors.click,
                      child: Padding(
                        padding: EdgeInsets.only(
                          right: Dimensions.scaleW(15),
                        ),
                        child: Container(
                          height: Dimensions.scaleH(50),
                          width: Dimensions.scaleW(23),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(50),
                              color: const Color(0xFFc7d8eb)),
                          alignment: Alignment.center,
                          child: Text(
                            "Sign Up",
                            style: TextStyle(
                                color: const Color(0xFF171d37),
                                fontSize: Dimensions.scaleH(15)),
                          ),
                        ),
                      ),
                    )
                  ],
                )
              ],
            ),
          ),
    );
  }
}

This code defines a NavbarContainer widget, which represents a container for a navigation bar in a Flutter app. Here's a summary of what's happening in this code:

The NavbarContainer widget is a StatefulWidget that manages its state using _NavbarContainerState.

In the build method, a Container widget is returned. This container serves as the background for the navigation bar.

The container has a set width and height, determined by the screen dimensions and scaling factors from the Dimensions class.

The container's background color is set to a dark blue color with a hexadecimal value.

Inside the container, there is a Padding widget, which adds padding to its child widgets.

Within the Padding widget, there are two Row widgets placed side by side.

The first Row contains a AppWriteImage widget, an image asset, and a row of MouseEvent widgets representing links like "Docs," "Community," and a GitHub logo.

The second Row contains a ToogleSwitch widget (possibly for enabling/disabling a feature), a "Sign In" text, and a "Sign Up" button with customized styling.

The styling, colors, and layout of these widgets are adjusted using dimensions and colors from the Dimensions class and constants imported from other files.

Overall, this code defines the structure and styling of a navigation bar (NavbarContainer) for a Flutter app, including links, buttons, and images.

Now let's work on our widget folder:

appwrite_image.dart:

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

import '../../../constants/dimes.dart';

class AppWriteImage extends StatefulWidget {
  final String imagePath;
  const AppWriteImage({super.key, required this.imagePath});

  @override
  State<AppWriteImage> createState() => _AppWriteImageState();
}

class _AppWriteImageState extends State<AppWriteImage> {
  bool isHovered = false;
  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      cursor: SystemMouseCursors.click,
      onEnter: (_) {
        setState(() {
          isHovered = true;
        });
      },
      onExit: (_) {
        setState(() {
          isHovered = false;
        });
      },
      child: Padding(
        padding: EdgeInsets.only(top: Dimensions.scaleH(15),left: Dimensions.scaleW(13)),
        child: SvgPicture.asset(
          widget.imagePath,
          fit: BoxFit.contain,
          height: Dimensions.scaleH(30),
        ),
      ),
    );
  }
}

This code defines a AppWriteImage widget that displays an SVG image. Here's an explanation of the code:

AppWriteImage is a StatefulWidget that takes an imagePath as a required parameter. This path specifies the location of the SVG image to be displayed.

_AppWriteImageState manages the state of the widget, particularly tracking whether the mouse pointer is hovering over the image.

In the build method:

MouseRegion is used to detect mouse hover events. When the mouse pointer enters the region, it sets the isHovered state to true, and when it exits, it sets it to false.

Inside, a Padding widget adds some spacing to the top and left of the image.

SvgPicture.asset is used to display the SVG image specified by widget.imagePath. It's configured to fit the container BoxFit.contain and has a specific height based on the Dimensions.scaleH(30) value.

Overall, this code creates a reusable AppWriteImage widget that can display SVG images. It also adds interactivity by changing the isHovered state when the mouse enters or exits the image area. This state change can be used for various purposes, such as highlighting the image when hovered.

github.dart:

import 'package:flutter/material.dart';
import 'package:simple_icons/simple_icons.dart';

import '../../../constants/dimes.dart';

class GitHubLogo extends StatefulWidget {
  const GitHubLogo({super.key});

  @override
  State<GitHubLogo> createState() => _GitHubLogoState();
}

class _GitHubLogoState extends State<GitHubLogo> {
  bool isHovered = false;
  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      cursor: SystemMouseCursors.click,
      onEnter: (_) {
        setState(() {
          isHovered = true;
        });
      },
      onExit: (_) {
        setState(() {
          isHovered = false;
        });
      },
      child: Padding(
        padding: EdgeInsets.only(
          left: Dimensions.scaleW(6),
          top: Dimensions.scaleH(15),
        ),
        child: Container(
          height: Dimensions.scaleH(30),
          decoration: BoxDecoration(
            border: Border(
              bottom: BorderSide(
                  width: 1,
                  color: isHovered ? Colors.white : Colors.transparent),
            ),
          ),
          child: Row(
            children: [
              Icon(
                SimpleIcons.github,
                color: const Color(0xFFc7d8eb),
                size: Dimensions.scaleH(15),
              ),
              Padding(
                padding: EdgeInsets.only(left: Dimensions.scaleW(2)),
                child: Text(
                  "GitHub",
                  style: TextStyle(
                    color: const Color(0xFFc7d8eb),
                    fontSize: Dimensions.scaleH(15),
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(
                  left: Dimensions.scaleW(2),
                ),
                child: Container(
                  decoration: BoxDecoration(
                    color: const Color(0xFF81859b),
                    borderRadius: BorderRadius.circular(5),
                  ),
                  height: Dimensions.scaleH(22),
                  width: Dimensions.scaleW(8),
                  alignment: Alignment.center,
                  child: Text(
                    "33k",
                    style: TextStyle(
                      // color: const Color(0xFFc4cbd8),
                      color: Colors.white,
                      fontSize: Dimensions.scaleH(13),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

This code defines a GitHubLogo widget that displays a GitHub icon along with related text and statistics. Here's an explanation of the code:

GitHubLogo is a StatefulWidget that doesn't have any required parameters.

_GitHubLogoState manages the state of the widget, tracking whether the mouse pointer is hovering over it.

In the build method:

MouseRegion is used to detect mouse hover events. When the mouse pointer enters the region, it sets the isHovered state to true, and when it exits, it sets it to false.

Inside, a Padding widget adds some spacing to the left and top of the widget.

A Container widget is used to create a container for the GitHub logo, text, and statistics. It has a specific height based on Dimensions.scaleH(30).

The container has Border a BorderSide that becomes visible when the widget is hovered (isHovered). This creates an underlying effect for the text.

Inside the container, there is a Row widget with the following children:

An Icon widget displaying the GitHub icon from the SimpleIcons package. It has a specific color and size based on Dimensions.scaleH(15).

A Text widget with the text "GitHub," styled with a specific color and font size.

Another Container widget with a background color, border radius, and text displaying statistics like "33k."

Overall, this code creates a reusable GitHubLogo widget that can display a GitHub icon, text, and statistics, with interactivity for mouse hover effects. The appearance and behavior of the widget can be customized using the Dimensions color constants defined in the app.

mouse_widget.dart:

import 'package:appwrite_web/constants/dimes.dart';
import 'package:flutter/material.dart';

class MouseEvent extends StatefulWidget {
  final String text;
  const MouseEvent({super.key, required this.text});

  @override
  State<MouseEvent> createState() => _MouseEventState();
}

class _MouseEventState extends State<MouseEvent> {
  bool isHovered = false;
  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      cursor: SystemMouseCursors.click,
      onEnter: (_) {
        setState(() {
          isHovered = true;
        });
      },
      onExit: (_) {
        setState(() {
          isHovered = false;
        });
      },
      child: Padding(
        padding: EdgeInsets.only(
          left: Dimensions.scaleW(4),
          top: Dimensions.scaleH(20),
        ),
        child: Container(
          height: Dimensions.scaleH(30),
          decoration: BoxDecoration(
            border: Border(
              bottom: BorderSide(
                  width: 1,
                  color: isHovered ? Colors.white : Colors.transparent),
            ),
          ),
          child: Text(
            widget.text,
            style: TextStyle(
              fontSize: Dimensions.scaleH(15),
              color: const Color(0xFFc7d8eb),
            ),
          ),
        ),
      ),
    );
  }
}

This code defines a MouseEvent a widget that represents an interactive text element typically used for links or navigation items. Here's an explanation of the code:

MouseEvent is a Stateful widget that takes a required text parameter, which specifies the text content of the widget.

_MouseEventState manages the state of the widget, tracking whether the mouse pointer is hovering over it.

In the build method:

MouseRegion is used to detect mouse hover events. When the mouse pointer enters the region, it sets the isHovered state to true, and when it exits, it sets it to false.

Inside, a Padding widget adds some spacing to the left and top of the widget.

A Container widget is used to create a container for the text. It has a specific height based on Dimensions.scaleH(30).

The container has Border a BorderSide that becomes visible when the widget is hovered (isHovered). This creates an underlying effect for the text.

Inside the container, there is a Text widget displaying the widget.text. The text is styled with a specific font size and color.

Overall, this code creates a reusable MouseEvent widget for displaying interactive text elements that can respond to mouse hover events. The appearance and behavior of the widget can be customized using the Dimensions color constants defined in the app.

switch.dart:

import 'package:appwrite_web/constants/dimes.dart';
import 'package:flutter/material.dart';

import 'package:flutter_switch/flutter_switch.dart';

class ToogleSwitch extends StatefulWidget {
  const ToogleSwitch({super.key});

  @override
  State<ToogleSwitch> createState() => _ToogleSwitchState();
}

class _ToogleSwitchState extends State<ToogleSwitch> {
  bool state = false;
  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      cursor: SystemMouseCursors.click,
      child: FlutterSwitch(
        height: Dimensions.scaleH(24),
        width: Dimensions.scaleW(11),
        value: state,
        padding: 2.0,
        activeToggleColor: Colors.white,
        inactiveToggleColor: const Color(0xFF2F363D),
        activeColor: const Color(0xFFe2e2e2),
        inactiveColor: const Color(0xFFc7d8eb),
        activeIcon: const Icon(
          Icons.wb_sunny,
          color: Color(0xFF8f8f8f),
        ),
        inactiveIcon: Transform.rotate(
          angle: 200,
          child: const Icon(
            Icons.nightlight_round,
            color: Color(0xFFbec3e0),
          ),
        ),
        onToggle: (val) {
          setState(() {
            state = val;
          });
        },
      ),
    );
  }
}

This code defines a ToogleSwitch a widget that displays a toggle switch with a customizable appearance and interactivity. Here's an explanation of the code:

ToogleSwitch is a StatefulWidget that doesn't require any parameters.

_ToogleSwitchState manages the state of the widget, specifically tracking whether the switch is in an "on" or "off" state.

In the build method:

MouseRegion is used to detect mouse click events on the widget, allowing the user to toggle the switch.

Inside the MouseRegion, a FlutterSwitch widget is used to create the toggle switch. The FlutterSwitch widget is highly customizable and provides options for controlling its appearance and behavior.

The height and width properties of the switch are set based on scaled dimensions using Dimensions.scaleH and Dimensions.scaleW.

The value property of the switch represents its state (on or off), and it is controlled by the state variable in the widget's state.

The padding the property adds spacing around the switch.

Various colors are customized for the active and inactive states, toggle colors, and icons.

Icons (Icons.wb_sunny and Icons.nightlight_round) are used to represent the on and off states of the switch. The icons can also be customized with colors.

The onToggle callback is used to update the state variable when the switch is toggled. This callback is triggered when the user interacts with the switch.

Overall, this code creates a reusable ToogleSwitch widget that provides a customizable toggle switch with interactivity. The appearance and behavior of the switch can be adjusted using the provided properties and callback function.

Hence our NavBar Appwrite website is completed

Simplify State Management with Provider in Flutter

raman04-byte — Sun, 24 Sep 2023 12:30:00 +0000

In this blog post, we'll explore how to implement state management using the Provider package in Flutter. To illustrate this, we'll create a Voting Age Calculator application. This app will help users determine if they are eligible to vote based on their age.

Introduction to Provider
Provider is a versatile state management solution for Flutter. It offers a straightforward and efficient way to manage and share application state. Let's dive into how you can use Provider for your Flutter projects.

What is Provider and Why Should You Care?
Provider is a state management library for Flutter that makes managing and sharing your app's state a breeze. It's easy to understand and integrate into your projects, making your code more organized and efficient.

Here's why you should care about Provider:

Simplicity: Provider simplifies state management, especially when compared to other approaches like InheritedWidget or Redux.

Scalability: It's suitable for both small apps and large, complex ones. You won't outgrow Provider.

Widget Rebuild Optimization: Provider automatically optimizes widget rebuilds, improving performance.

Widely Adopted: Provider is well-supported by the Flutter community and is used in many open-source packages.

Now that we understand why Provider is awesome, let's see how we can implement it.

Setting Up the Provider
First, ensure you have the Provider package added as a dependency in your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.5  # Use the latest version

Creating the Model
In Flutter, the model represents the data you want to share across your app. In our case, the model will store the eligibility message and a boolean value indicating whether the user is eligible to vote.

class EligibilityScreenProvider extends ChangeNotifier {
  String _eligibilityMessage = "";
  bool _isEligible = false;

  // Check eligibility based on age
  void checkEligibility(int age) {
    if (age >= 18) {
      eligibleForVoting();
    } else {
      notEligibleForVoting();
    }
  }

  // User is eligible for voting
  void eligibleForVoting() {
    _eligibilityMessage = "You are eligible for Voting";
    _isEligible = true;
    notifyListeners();
  }

  // User is not eligible for voting
  void notEligibleForVoting() {
    _eligibilityMessage = "You are not eligible for Voting";
    _isEligible = false;
    notifyListeners();
  }

  String get eligibilityMessage => _eligibilityMessage;
  bool get isEligible => _isEligible;
}

Building the User Interface
Now that we have our data model set up, let's create the user interface. We'll design a simple form where users can enter their age and check their eligibility to vote.

class Voting extends StatefulWidget {
  const Voting({super.key});

  @override
  State<Voting> createState() => VotingState();
}

class VotingState extends State<Voting> {
  final votingAge = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<EligibilityScreenProvider>(
      create: (context) => EligibilityScreenProvider(),
      child: Builder(builder: (context) {
        return Scaffold(
          body: Container(
            padding: const EdgeInsets.all(16),
            child: Form(
              child: Consumer<EligibilityScreenProvider>(
                builder: (context, provider, child) {
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: (provider.isEligible == null)
                              ? Colors.grey
                              : provider.isEligible
                                  ? Colors.green
                                  : Colors.red,
                        ),
                        height: 50,
                        width: 50,
                      ),
                      const SizedBox(height: 16),
                      TextFormField(
                        controller: votingAge,
                        decoration:
                            const InputDecoration(hintText: "Enter your age"),
                      ),
                      const SizedBox(height: 16),
                      SizedBox(
                        width: double.infinity,
                        child: ElevatedButton(
                          onPressed: () {
                            final int age = int.parse(votingAge.text.trim());
                            provider.checkEligibility(age);
                          },
                          child: const Text("Check if you can vote"),
                        ),
                      ),
                      const SizedBox(height: 16),
                      Text(provider.eligibilityMessage)
                    ],
                  );
                },
              ),
            ),
          ),
        );
      }),
    );
  }
}

Running the Application
In the main.dart file, we simply set up the application theme and set the Voting widget as the home screen.

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: const Voting(),
    );
  }
}

Conclusion
By following this guide, you've learned how to implement state management using the Provider package in Flutter. We built a Voting Age Calculator application that demonstrates how Provider can simplify state management and make your Flutter development journey smoother.

Sharing is caring! If you found this guide helpful, don't forget to share it with your fellow Flutter developers. Happy coding! ✨

FlutterDev #Provider #StateManagement #FlutterState #MobileAppDevelopment

Video: https://youtu.be/kr9hE-CfY3Y

Understanding Stateful vs. Stateless Widgets in Flutter

raman04-byte — Fri, 22 Sep 2023 15:00:00 +0000

If you're diving into Flutter development, you've likely encountered the terms "Stateful" and "Stateless" widgets. These are the building blocks of your Flutter app's user interface, and understanding when to use each is crucial. Let me break it down for you.

Stateless Widgets
Stateless widgets are, as the name suggests, static and unchanging. They don't store any mutable data. Once you create a Stateless widget, its properties (also called parameters) cannot change. Here's what you need to know:

Immutability: Stateless widgets are immutable. Once you set their properties in the constructor, they won't change during the widget's lifetime.

Build Method: Stateless widgets must override the build method. This method returns the widget that the StatelessWidget represents. This is where you define what your widget should look like.

Example: A button with a static label. It doesn't change based on user interactions.

class MyButton extends StatelessWidget {
  final String label;

  const MyButton({required this.label});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {},
      child: Text(label),
    );
  }
}

Stateful Widgets
Stateful widgets, on the other hand, can change. They have an associated mutable state object that can be modified. Here's the lowdown:

Mutable State: Stateful widgets can hold data that might change during the widget's lifetime. You can call setState to trigger a rebuild with new data.

Build Method: Like Stateless widgets, Stateful widgets also have a build method. This method returns the widget based on the current state.

Example: A counter that increments when you tap a button.

class MyCounter extends StatefulWidget {
  @override
  _MyCounterState createState() => _MyCounterState();
}

class _MyCounterState extends State<MyCounter> {
  int count = 0;

  void incrementCounter() {
    setState(() {
      count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

When to Use Which?
Use Stateless Widgets when your widget doesn't need to change after being built. They're efficient and straightforward.

Choose Stateful Widgets when your widget's content needs to change dynamically based on user interactions or other factors.

In Flutter, combining Stateless and Stateful widgets efficiently is key to building responsive and interactive user interfaces. Now that you're armed with this knowledge, go ahead and craft amazing Flutter apps! 🚀📱 #FlutterDev #StatefulVsStateless

Video: https://youtu.be/LN_7wjeDZiU

Using setState for Simple State Management in Flutter

raman04-byte — Wed, 20 Sep 2023 14:30:00 +0000

When diving into the world of Flutter, one of the first challenges developers encounter is managing the state of their application. State management is a critical aspect of building robust and responsive Flutter apps. While Flutter provides various state management solutions like Provider, Riverpod, and Bloc, it's essential to understand the basics before diving into these more advanced tools. In this post, I'll introduce you to one of the fundamental methods of managing state in Flutter: setState.

What is setState?
setState is a method provided by the State class in Flutter. It's commonly used for updating the state of a StatefulWidget. This method tells Flutter to rebuild the widget with the updated state. It's a simple and built-in way to manage the state of your widget tree.

How Does setState Work?
Let's explore how setState works by dissecting a simple Flutter app.

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: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Steps in the Code:
Define a Mutable State: To use setState, you first need to define a mutable state variable within your widget's state class. In this example, _counter represents the number of times a button is pressed.

int _counter = 0;

Wrap the UI Elements: Wrap the UI elements that depend on this state with a Builder widget. The Builder widget is a way to obtain a BuildContext when you don't have access to it within the build method.

Builder(
  builder: (context) => Text('Counter: $_counter'),
),

Call setState: When you want to update the state, call setState. This function takes a callback where you update the state variable. In this case, _incrementCounter is called when the button is pressed, and it updates _counter.

void _incrementCounter() {
  setState(() {
    _counter++;
  });
}

Rebuild Widgets: After calling setState, Flutter knows that the widget's state has changed, so it rebuilds the widget and any widgets that depend on this state. In this example, the text displaying the counter is rebuilt every time _counter changes.

Text(
  '$_counter',
  style: Theme.of(context).textTheme.headlineMedium,
),

When to Use setState?
setState is suitable for simple cases where the state is localized to a specific widget or a small widget subtree. It's handy for:

Toggling UI elements.
Incrementing/decrementing counters.
Managing the state of simple forms.
Limitations of setState
While setState is a straightforward way to manage state, it has its limitations:

Performance: Calling setState rebuilds the entire widget, which can be inefficient if your widget tree is large.

Global State: It's not suitable for managing global app state or sharing state between distant parts of your app.

Wrapping Up
setState is a valuable tool for simple state management within a widget. It's a great starting point for beginners to understand the concept of state in Flutter. As your app grows and becomes more complex, you may want to explore more advanced state management solutions like Provider or Riverpod. Stay tuned for our upcoming posts on those topics!

Remember, practice makes perfect. So, fire up your code editor, create a StatefulWidget, and start experimenting with setState. Happy coding, Flutteristas! 🚀✨

Did you find this post helpful? Share your thoughts and experiences with setState in the comments below. And stay tuned for more Flutter insights and tips! 📱💙 #FlutterDev #StateManagement #FlutterWidgets

Video: https://youtu.be/QCY-k2OErEM