A Quick Guide To Dialog Box In Flutter – Hupen Design

A Quick Guide To Dialog Box In Flutter – Hupen Design

A Quick Guide To Dialog Box In Flutter – Hupen Design
Published At By Hupen Pun

Grid View in Flutter is a powerful way to create a visually appealing and interactive layout for your app. With the GridView widget, you can easily create a grid layout and populate it with widgets, images, or other elements. In this blog post, we will explore the basics of using GridView in Flutter and show you how to create a simple grid layout for your app.

The first step in creating a GridView in Flutter is to add the GridView widget to your app’s layout. You can do this by using the child property of the Container widget. For example:

Container(
  child: GridView.count(
    crossAxisCount: 2,
    children: [
      Container(
        color: Colors.red,
        child: Text('Item 1'),
      ),
      Container(
        color: Colors.green,
        child: Text('Item 2'),
      ),
      Container(
        color: Colors.blue,
        child: Text('Item 3'),
      ),
    ],
  ),
)

In the above example, we are using the GridView.count constructor to create a grid layout with 2 columns. The children property is used to specify the widgets that will be displayed in the grid.

Another important property of the GridView widget is the crossAxisCount property, which specifies the number of columns in the grid. You can also use the mainAxisSpacing and crossAxisSpacing properties to add spacing between the items in the grid.

Additionally, GridView allows to use .builder constructor in order to build the grid on demand, which is useful when dealing with large data sets.

GridView.builder(
    itemCount: 100,
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2),
    itemBuilder: (BuildContext context, int index) {
      return Container(
        color: Colors.red,
        child: Text('Item $index'),
      );
    },
  ),

In the above example, we are using the GridView.builder constructor to create a grid layout with 100 items. The itemBuilder callback is used to generate the widgets that will be displayed in the grid.

In conclusion, GridView in Flutter is a powerful and flexible way to create grid layouts for your app. With the ability to control the number of columns, spacing, and the ability to build grid on demand, it makes it a great option for creating visually appealing and interactive layouts.

You can have in detail information on the GridView widget in this official Flutter Widget Of The Week from Google Flutter Team.

Five useful flutter commands – Flutter development

Five useful flutter commands – Flutter development

Five useful flutter commands – Flutter development
Published At By Hupen Pun

Flutter is an open source Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase. Flutter is fast in the development process, can give native performance and can have flexible and adoptable ui components.

Flutter was first released in 2017 and since then it’s getting huge popularity and adaptation in mobile development communities. The best part of flutter is you can build apps for different variants with a single codebase that means you don’t have to write a single application in different codebases. Now, with the stable release of version 2.13 flutter is now supporting a web feature that will enable you to have a website with the same code. Hence, you can have mobile apps and web apps with a single codebase. 

Enough talking on background, let’s focus on the main topic, i.e. useful flutter commands in flutter development. Here in this blog I have included five flutter commands with a detailed description.

1. Flutter emulators

This command helps you show the emulators you had created on your device. It will show the device name with its unique id through which you can access your emulator.

flutter emulators

2. Flutter emulators –launch

This command is very helpful and saves a lot of time. Basically, this command helps you launch an emulator right from your command prompt. Here, –launch flag with the emulator id that you had in the previous command will launch the emulator.

flutter emulators --launch 'emulator_id'

3. Flutter clean

This is one of my favourite commands in flutter. If you need to delete a previously built/compiled app, it will help you out like a magic snap.

flutter clean

4. Flutter run

Flutter run command helps you build your app and run on a connected device. This command first fetches dependencies with flutter pub get command, builds/compiles and then runs on the connected device.

flutter run

5. Flutter doctor

This command checks your environment and displays a report of the status of your Flutter installation. Check the output carefully for other software you might need to install or further tasks to perform. For example, android studio is installed or not, which flutter version you are currently using on, android SDK installed or not etc.

flutter doctor

There are other tons of commands though. I have included some here.

flutter create 'project_name'
flutter pub get
flutter pub add 'package_name'
flutter build appbundle / flutter build apk

Flutter development is so interesting, easy and fast. I was previously used to developing apps using android studio and Java, but when flutter was first released, it started switching to flutter and now I have all my apps with flutter. Thank you for reading my blog.