A Quick Guide To Column Widget In Flutter – Hupen Design

A Quick Guide To Column Widget In Flutter – Hupen Design

by | Feb 22, 2023 | Flutter, Flutter Framework, Mobile Development, Uncategorized

A Quick Guide To Column Widget In Flutter – Hupen Design
Published At By Hupen Pun

The Column widget in Flutter is a flexible layout widget that is used to arrange child widgets vertically. It is one of the most basic and commonly used widgets in Flutter and is an essential tool for building responsive and attractive user interfaces. In this blog post, we will explore the basics of using the Column widget in Flutter and show you how to create and customize it for your app.

To create a Column widget in Flutter, simply wrap the child widgets you want to display in a Column widget. For example:

Column(
  children: [
    Text('Column Item 1'),
    Text('Column Item 2'),
    Text('Column Item 3'),
  ],
)

In the above example, we are creating a Column widget with three child Text widgets. The child widgets will be displayed vertically, one after the other.

The Column widget provides several properties that you can use to customize its appearance and behavior. For example, you can use the crossAxisAlignment property to control the alignment of the child widgets in the cross axis. For example:

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text('Column Item 1'),
    Text('Column Item 2'),
    Text('Column Item 3'),
  ],
)

In the above example, we are using the crossAxisAlignment property to center the child widgets in the cross axis.

You can also use the mainAxisAlignment property to control the alignment of the child widgets in the main axis. For example:

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Text('Column Item 1'),
    Text('Column Item 2'),
    Text('Column Item 3'),
  ],
)

In the above example, we are using the mainAxisAlignment property to distribute the space evenly between the child widgets in the main axis.

In conclusion, the Column widget in Flutter is a simple and flexible layout widget that is essential for building responsive and attractive user interfaces. With the ability to customize its appearance and behavior, it makes it a great option for creating engaging and interactive experiences in your app.

You can have in detail information on the SnackBar widget in this official Flutter Channel.

A Quick Guide To Dialog Box In Flutter – Hupen Design

A Quick Guide To Dialog Box In Flutter – Hupen Design

by | Feb 2, 2023 | App Development, Career, Design, Flutter, Flutter Commands, Flutter Framework, Mobile Development

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

Dialog Box is a commonly used UI component in Flutter that is used to display important information or prompts to the user. It is a pop-up window that appears on top of the current screen and requires the user to take some action. In this blog post, we will explore the basics of using AlertDialog in Flutter and show you how to create and customize it for your app.

The first step in creating an AlertDialog in Flutter is to call the showDialog function, which takes a context argument and a builder function that returns the AlertDialog widget. For example:

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('Alert Dialog Title'),
      content: Text('This is the content of the alert dialog'),
      actions: [
        FlatButton(
          child: Text('OK'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);

In the above example, we are creating an AlertDialog with a title, content, and an action. The actions property is used to specify the buttons that will be displayed at the bottom of the alert dialog. You can add as many actions as you like, but it is recommended to limit the number of actions to two.

You can also customize the appearance of the AlertDialog by changing its title, content, backgroundColor, and other properties. For example:

AlertDialog(
  title: Text('Alert Dialog Title'),
  content: Text('This is the content of the alert dialog'),
  backgroundColor: Colors.blue,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  actions: [
    FlatButton(
      child: Text('OK'),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
  ],
);

In the above example, we are changing the background color of the AlertDialog to blue and giving it a rounded rectangle border with a 10.0 radius.

In conclusion, AlertDialog is a useful UI component in Flutter that allows you to display important information or prompts to the user. With the ability to customize its appearance and behavior, it makes it a great option for creating engaging and interactive experiences in your app.

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

by | Aug 23, 2021 | App Development, Design, Flutter Commands, Flutter Framework, Mobile 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.