Flutter bottom_navy_bar

A simple bottom navigation bar for your Flutter app


bottom navy bar is savior package to all your bottom navigation needs. This is a flutter favorite package.

This is a complete customizable widget with animation

Remember to add Null safety version in the pubspec file

dependencies:
  ...
  bottom_navy_bar: ^6.0.0

Usage

Here is the code sample for bottom navigation in the scaffold.

bottomNavigationBar: BottomNavyBar(
   selectedIndex: _selectedIndex,
   showElevation: true, // use this to remove appBar's elevation
   onItemSelected: (index) => setState(() {
              _selectedIndex = index;
              _pageController.animateToPage(index,
                  duration: Duration(milliseconds: 300), curve: Curves.ease);
    }),
   items: [
     BottomNavyBarItem(
       icon: Icon(Icons.apps),
       title: Text('Home'),
       activeColor: Colors.red,
     ),
     BottomNavyBarItem(
         icon: Icon(Icons.people),
         title: Text('Users'),
         activeColor: Colors.purpleAccent
     ),
     BottomNavyBarItem(
         icon: Icon(Icons.message),
         title: Text('Messages'),
         activeColor: Colors.pink
     ),
     BottomNavyBarItem(
         icon: Icon(Icons.settings),
         title: Text('Settings'),
         activeColor: Colors.blue
     ),
   ],
)

Flutter null safety error

How to fix Flutter app, null safety error in Android studio


For some dart packages may fall in with null safety error. To bypass this error we can run flutter with additional parameter

This can be done using the console or Android Studio configuration.

On Android Studio

Got to the Run menu directly and find Edit Configuration.

Android Studio configuration

In the additional run args section pass the –no-sound-null-safety option.

VS Code have similar option too.

On Terminal

Using terminal to run the flutter project , we can combine the run command with

–no-sound-null-safety.

flutter run --no-sound-null-safety

Faker for Flutter apps

About generating mock data with Dart Faker package.


Faker is a flutter Dart package to assist developers by providing mock data. First up all need to add the dependency

Adding the package

In Android Studio use Pub Assist menu ( assume that installed the flutter plugin required).

Visual Studio Code also have the pubspec extension

Alternatively we can manually add the package to pubspec.yaml file also.

dependencies:
  flutter:
    sdk: flutter
    faker: ^2.0.0

Using the package

 final faker = Faker();
 
    return _MessageTitle(
        messageData: MessageData(
            senderName: faker.person.name(),
            message: faker.lorem.sentence(),          
  }

In the above widget example we create an object of Faker and used to generate person name and lorem sentence.

Get digital ocean cloud computing for 2 Month for Free.

DigitalOcean Referral Badge

Flutter Search Widget

Flutter Search Widget


This is simple Flutter Search Widget using controller

class SearchBox extends StatelessWidget {
  const SearchBox({Key? key, required this.hintText, required this.controller})
      : super(key: key);

  final String hintText;
  final TextEditingController controller;

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            TextField(
              controller: controller,
              decoration: InputDecoration(
                border: const OutlineInputBorder(
                  borderSide: BorderSide(width: 2),
                  borderRadius: BorderRadius.all(Radius.circular(30.0)),
                ),
                hintText: hintText,
                suffixIcon: const Icon(Icons.search),
              ),
            ),
          ],
        ));
  }
}

Flutter listview crashes in Column widget

How to solve ListView in Column widget error in Flutter using Expanded.


Listview and Column Widget

Sometimes you may want to combine UI vertically along the screen, that’s were we need a Column Widget.

When I tried to place a search box, a customized Text widget, and ListView widget, Flutter shower with errors.

 Column(
          children: [
            SearchBox(hintText: 'Search', controller: textController),
            ListView.builder(
                // the number of items in the list
                itemCount: adList.length,
 

This happens because in the column widget Listview didn’t fit. To make it adjustable for the column wrap the ListView with Expanded widget, in case of Vertical listview.

The expanded widget can have single child widget.

Column(
          children: [
            SearchBox(hintText: 'Search', controller: textController),
            Expanded(
              child: ListView.builder(

and it should solve the issue.

Following Flutter posts deserve a good read

How to add web/desktop support for existing flutter app in OpenSUSE

How to enable flutter-web/desktop features in an existing project On OpenSUSE


Have flutter project in hand which is built for Android and iOS, now want to built desktop and web counter part?

Make sure that you have enabled, web, desk features. To ensure this run the following

Flutter devices

If not please go through the web/desk support post.

How to enable Flutter Web support in Ubuntu Linux - How to enable Flutter Web development in Ubuntu Linux
How to enable Flutter Desktop support in Ubuntu Linux - How to setup Flutter Desktop development environment on Ubuntu

Here is the solution

Make sure you had an active internet connection.

Cd to your project folder and in the console enter these commands

For few second it will add tools for desktop and web features.

Flutter create . 

Run the flutter command

Flutter run -d chrome

Flutter will goes through building process and will bring you a local host id.

For desk top try to run

Flutter run -d windows/linux/mac 

How to add web/desktop support for existing flutter app in Ubuntu

How to enable flutter-web/desktop features in an existing project On Ubuntu


Have flutter project in hand which is built for Android and iOS, now want to built desktop and web counter part?

Make sure that you have enabled, web, desk features. To ensure this run the following

Flutter devices

If not please go through the web/desk support post.

How to enable Flutter Web support in Ubuntu Linux - How to enable Flutter Web development in Ubuntu Linux
How to enable Flutter Desktop support in Ubuntu Linux - How to setup Flutter Desktop development environment on Ubuntu

Here is the solution

Make sure you had an active internet connection.

Cd to your project folder and in the console enter these commands

For few second it will add tools for desktop and web features.

Flutter create . 

Run the flutter command

Flutter run -d chrome

Flutter will goes through building process and will bring you a local host id.

For desk top try to run

Flutter run -d windows/linux/mac 

How to enable Flutter Web support in Ubuntu Linux

How to enable Flutter Web development in Ubuntu Linux


Flutter can be used to create web applications, which is possible by enabling the feature. Before that I would like recommend the basic flutter setup on Ubuntu post.

How to install Flutter on Ubuntu Linux

Lets Install Flutter for Ubuntu Linux development. As a open source project, we can install the flutter SDK from GitHub.

The prerequisites

In order to clone the repository we have to use git . In case your SUSE doesn’t know what it is, let’s install it with snap . Also recommend to have Visual Code /Atom for editing the code.

The following post may help you to install VS Code on Ubuntu

Install the git

sudo snap install git

Clone the repo

Get the latest stable version from GitHub repository or alternatively can download from flutter site

git clone https://github.com/flutter/flutter.git -b stable --depth 1

Use the -b option to clone the stable version

Setup the path variable

You also need to set the path variable using the shell command as follows.

</p>
export PATH="$PATH:pwd/flutter/bin"
<p>

Call the Doctor

run Flutter doctor command to inspect status of your Flutter SDK

Flutter Doctor

Android IOS development

For Android you have to install the Android Studio for development tool support which can be download from official website.

For official documentation visit flutter.dev

Enable web feature

Before starting make sure you have chrome/chromium installed on your system. Otherwise the feature may not work

For enabling the web feature we have to switch to the beta channel ( web feature is an experimental feature and official full support is not yet released)

flutter channel beta
flutter upgrade
flutter config --enable-web

Run the flutter device command again and then check the web feature is list or not by using

flutter devices

and it will list the web feature

Test Run

Create sample Flutter project

flutter create myweb_app
Flutter Web on Ubuntu

run the app using flutter run command

flutter run -d chrome

For building the web we can use

flutter build web

How to enable Flutter Desktop support in Ubuntu Linux

How to setup Flutter Desktop development environment on Ubuntu


Flutter can be used to create Linux applications, which is possible by enabling the feature. Before that I would like recommend the basic flutter setup on Ubuntu post.

How to install Flutter on Ubuntu Linux

Lets Install Flutter for Ubuntu Linux development. As a open source project, we can install the flutter SDK from GitHub.

The prerequisites

In order to clone the repository we have to use git . In case your SUSE doesn’t know what it is, let’s install it with snap . Also recommend to have Visual Code /Atom for editing the code.

The following post may help you to install VS Code on Ubuntu

Install the git

sudo snap install git

Clone the repo

Get the latest stable version from GitHub repository or alternatively can download from flutter site

git clone https://github.com/flutter/flutter.git -b stable --depth 1

Use the -b option to clone the stable version

Setup the path variable

You also need to set the path variable using the shell command as follows.

</p>
export PATH="$PATH:pwd/flutter/bin"
<p>

Call the Doctor

run Flutter doctor command to inspect status of your Flutter SDK

Flutter Doctor

Android IOS development

For Android you have to install the Android Studio for development tool support which can be download from official website.

For official documentation visit flutter.dev

Enable desktop feature

In order to make Linux ready for Flutter desktop development environment we should have following dependencies

  • clang
  • cmake
  • ninja- build
  • pkg-config
  • libgtk-3-dev
  • libblkid-dev
  • liblzma-dev

install them using snap/ apt-get command

sudo apt-get install clang cmake ninja-build pkg-config libgtk-3-dev libblkid-dev liblzma-dev

Now switch to the dev channel and run upgrade command, which will install necessary libraries and packages.

flutter channel dev
flutter upgrade

Configure the feature using config

flutter config --enable-linux-desktop

run the flutter doctor and then flutter devices as follows

flutter doctor
flutter devices

Make sure the devices command list the Linux desktop

Test Run

Create sample Flutter project

flutter create myweb_app

run the app using flutter run command

Flutter Desktop app in openSUSE

flutter run -d linux
or
flutter run

Happy fluttering

How to install Flutter on Ubuntu Linux

How to setup Flutter for development on Ubuntu Linux with Git


Lets Install Flutter for Ubuntu Linux development. As a open source project, we can install the flutter SDK from GitHub.

The prerequisites

In order to clone the repository we have to use git . In case your SUSE doesn’t know what it is, let’s install it with snap . Also recommend to have Visual Code /Atom for editing the code.

The following post may help you to install VS Code on Ubuntu

Install the git

sudo snap install git

Clone the repo

Get the latest stable version from GitHub repository or alternatively can download from flutter site

git clone https://github.com/flutter/flutter.git -b stable --depth 1

Use the -b option to clone the stable version

Setup the path variable

You also need to set the path variable using the shell command as follows.

export PATH="$PATH:pwd/flutter/bin"

Call the Doctor

run Flutter doctor command to inspect status of your Flutter SDK

Flutter Doctor

Android IOS development

For Android you have to install the Android Studio for development tool support which can be download from official website.

For official documentation visit flutter.dev