DEV Community: Geekaid

Know the Widgets in Flutter: Scaffold

Geekaid — Sat, 21 Jan 2023 04:30:00 +0000

You are reading this post means you have just started learning flutter, and now every tutorial or codelab you open you came across a widget named Scaffold. Do not worry after reading this blog post you will have a clear understanding of Scaffold.

If you have any problem setting up your flutter development environment refer to my flutter installation post where you can find a step-by-step guide.

Let’s get started.

What is Widget?

The Flutter app’s screens are made up entirely of widgets. You build the UI using widgets and the appearance of the UI depends on the choice and sequence of the Widget. Some examples of widgets are Scaffold, Text, etc.

Now you have a clear idea about widgets we can move forward to the scaffold, in this blog post we will be discussing the basics of Scaffold.

What is Scaffold?

The Scaffold is a widget in Flutter used to implement the basic material **design visual layout structure. **It provides APIs for showing drawers, app bars, bottom navigation, and bottom sheets.

In simple words, Scaffold provides you with a structure where you put widgets according to your needs while simultaneously following material design.

The following are the Scaffold constructor and properties.

const Scaffold({
    super.key,
    this.appBar,
    this.body,
    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,
    this.persistentFooterButtons,
    this.persistentFooterAlignment = AlignmentDirectional.centerEnd,
    this.drawer,
    this.onDrawerChanged,
    this.endDrawer,
    this.onEndDrawerChanged,
    this.bottomNavigationBar,
    this.bottomSheet,
    this.backgroundColor,
    this.resizeToAvoidBottomInset,
    this.primary = true,
    this.drawerDragStartBehavior = DragStartBehavior.start,
    this.extendBody = false,
    this.extendBodyBehindAppBar = false,
    this.drawerScrimColor,
    this.drawerEdgeDragWidth,
    this.drawerEnableOpenDragGesture = true,
    this.endDrawerEnableOpenDragGesture = true,
    this.restorationId,
  })

Let’s take a look glance at Scaffold properties individually.

1. appBar

This is a horizontal bar placed at the top of the app UI. appBar in Scaffold used AppBar Widget which has properties like title, elevation, brightness, etc.

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("GeekAid")),
    );
  }

Here, the appBar with the title property uses the Text widget to display the text “GeekAid” on the appBar.

2. body

The body is another essential property of the Scaffold, it is the space present below the appBar and behind the floatingActionButton.

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("GeekAid")),
      body: const Center(
          child: Text(
        "Scaffold Demo",
        style: TextStyle(fontSize: 40),
      )),
    );
  }

Here, the body property of the Scaffold uses a Centre to centre alignment (horizontally and vertically) of the content and Text widget to display the text “Scaffold Demo”.

3. floatingActionButton

a floatingActionButton is a button that is displayed at the bottom right corner floating above the body. floatingActionButton is used to promote some primary action in the app example: add.

floatingActionButton uses the FloatingActionButton widget to display the button.

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("GeekAid")),
      body: const Center(
          child: Text(
        "Scaffold Demo",
        style: TextStyle(fontSize: 40),
      )),
      floatingActionButton: FloatingActionButton(
        elevation: 10,
        child: const Icon(Icons.add),
        onPressed: () {
          print("flatingActionButton pressed");
        },
      ),
    );
  }

Here, the floatingActionButton property of Scaffold uses the FloatingActionButton widget to display a floating button at the bottom right corner. It uses an Icon widget to display the icon.

4. drawer

The drawer is a side panel or slider menu which is generally hidden in mobile devices and which can be accessed by sliding left to right or vice versa.

If you use a drawer in the app an icon is automatically added in the appBar at appropriate positions which can be used to access the drawer.

drawer: Drawer(
  elevation: 12,
  child: ListView(
    children: const <Widget>[
    DrawerHeader(
      decoration: BoxDecoration(color: Colors.orange),
      child: Center(
        child: Text("Geek Aid", style: TextStyle(fontSize: 40)))),
        ListTile(
          title: Text("Item 1"),
        ),
        ListTile(
          title: Text("Item 2"),
        )
    ],
  ),
),

Here, the drawer property of Scaffold uses the Drawer widget to display the sliding menu. The DrawerHeader widget is used to display the header of the drawer and ListTile to display the menu items.

5. persistentFooterButtons

The persistentFooterButtons are placed at bottom of the Scaffold if used with bottomNavigationBar and floatingActionButton then it lies above the bottomNavigationBar and below the floatingActionButton.

persistentFooterButtons remain at their assigned positions even if the body content is scrolled as the name suggests they remain persistently visible.

persistentFooterButtons: <Widget>[
 ElevatedButton(onPressed: () {}, child: const Icon(Icons.search)),
 ElevatedButton(onPressed: () {}, child: const Icon(Icons.send)),
],

Here, the persistentFooterButtons property of the Scaffold uses a list of widgets to display the widgets above the bottomNavigationBar.

6. bottomNavigationBar

bottomNavigationBar is used to render bottom Navigation below the persistentFotterButtons.

bottomNavigationBar: BottomNavigationBar(
  currentIndex: 0,
  items: const [
    BottomNavigationBarItem(label: "Home", icon: Icon(Icons.home)),
    BottomNavigationBarItem(label: "Search", icon: Icon(Icons.search)),
    BottomNavigationBarItem(label: "Lock", icon: Icon(Icons.lock)),
  ],
),

Here, the bottomNavigationBar property of the Scaffold uses the BottomNavigationBar widget to display the bottomNavigationBar. BottomNavigationBarItem is used to display the navigation icon and add a label to it.

These are some primary properties of scaffold we have discussed, now go ahead and start tweaking these properties one at a time to get a clear understanding and hands-on.

Conclusion

In this article, I tried to explain how to use Scaffold and its properties.

If I got something wrong, Inform me on my social media accounts and feel free to contact me and help me to correct it, I would love to improve and rectify my mistake.

You can subscribe to my newsletter at geekaid.in

❤️❤️ Thanks for reading this article ❤️❤️

How to set up your flutter development environment

Geekaid — Sat, 14 Jan 2023 16:54:51 +0000

How to set up your flutter development environment

“For the best return on your money, pour your purse into your head”

Hurry! now you have decided to learn flutter and it will be a good decision. Your journey will be full of hurdles but the whole community and I are here to help you out so relax.

The first hurdle you are facing is how to set up your development environment, Let’s get started.

Open docs.flutter.dev and select your operating system. I will be giving general steps here to install flutter, the documentation is very clear and I will address the common issue you will face.

#1. Download and install Android Studio

You will need an IDE to write code you can choose some other IDE but google recommends android studio and we will also install it.

To download android studio visit developer.android.com.

The installation is pretty simple to open the installer and give it the required permission read the term and conditions which no one does.

Allow android studio to download the latest SDK and some other files for its smooth functioning.

#2. Download flutter SDK

For windows and mac users you can either download the zip file or clone the stable version from GitHub.

Linux users can use snap to install or else apt repository.

#3. Add the path

The next step is to add a flutter/bin path to the global variables so that you can use the flutter cmd globally.

Windows:-

Open the start menu and type env from the results select Edit environment variables for your account.

Click on add new path and paste the path **flutter/bin **append the path before this if exists.

Mac:-

Extract the file to the desired location.

example:

$ cd ~/geekAid
$ unzip ~/Downloads/flutter_macos_3.3.6-stable.zip

Add flutter to your path, open the terminal at the install location and paste this cmd.

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

To add flutter to your path refer to this.

Linux:-

$ https://docs.flutter.dev/get-started/install/macos#update-your-path

If you have used snap to install flutter then you are good to go. You can use the cmd given below to check the flutter path.

You can also add the flutter path to the terminal temporarily, but I just go ahead and add it permanently.

You can refer to this article to add flutter to your path refer it.

#4. Run flutter doctor

To check the flutter installation is done properly and that there are no issues present open the terminal and write the cmd “ flutter doctor” and hit enter.

$ flutter doctor

If you got all the green flags then you are good to go.

But this will not be the case for many of you. Here I will discuss the most common issue here.

Flutter SDK not found in the specified location

You can install it from Android Studio.

Menu > Tools > SDK Manager > Android SDK > SDK Tools (tab)

From here find the missing dependency and install it.

Flutter run error: You have not accepted the license agreements

To accept the license and go ahead open the terminal and run the cmd

 $ flutter doctor --android-licensed

Now, after resolving the error run again “flutter doctor” to check for further issues.

If you still facing issues I suggest you try to find that issue on StackOverflow and resolve it.

#5. Installing the required plugins in android studio

These plugins give you run & debug support, syntax highlighting, code completion, widget editing assistance, and more.

To install plugins go to settings by ‘Ctrl+Alt+S’ or Menu> File > Settings.

In the setting open the plugin sections.

You need to install two plugins and search for them in the marketplace

flutter
dart

Once installed restart the IDE and you are good to go.

How to connect android studio with Firebase

Geekaid — Tue, 13 Dec 2022 04:45:00 +0000

I am sure you have started your journey of learning android development and then this mountain of problems came, but do not worry I help you out just follow the steps and follow my lead.

The first step is to make an account on Firebase. Now you have made one let’s get started.

Open the ram eater, oops! I mean android studio and Firebase in the browser in the Firebase

Follow the steps

1. Create a project on Firebase

Open your Firebase account and click on Add project

2. Project Name and other details

Give your project a name in my case I have used the name “Test” and click on continue.
For now, we will turn off google analytics and proceed, click on create a project and sit back and relax till Firebase creates your project.

3. Adding Firebase to App

Click on the android icon and now we have a list of tasks to do.

First, you fill in the package name, you can find the package name in the build.gradle, and in the file under the namespace, you can find your package name.

Well, some services of Firebase require a SHA1 key and I know it took me a while to out find how to get one. Fire up the android studio and open the run anything cmd execute to open “run anything” double press the Ctrl button and in the window type “signingReport” and hit enter.

Now a window will open and it will be showing your MD5, SHA1 and SHA256 keys from here copy SHA1 and paste it into the SHA1 input box on the firebase page.

Now, click on the register.

4. Add the config file

Download the config file and copy it. Now open android studio and there change the view from android to project, move to the app > src directory, and paste the file here.

Now go to the Firebase page and click on next.

5. Add Firebase SDK

In this step simply copy the dependencies mentioned and paste them into the mentioned Gradle files. You have two build.gradle file one is app level and another is module level.

Note:- those who use Gradle 7.+ will not see any dependency section in the build script in the project-level Gradle file so simply add the dependency section.

Now your app is successfully connected to firebase.

To learn how to use Firebase services I suggest you build some projects using it and I think the notes application is one of the best projects beginner-level application that you can build to learn Firebase. Here are some suggestions use Firebase authentication to provide auth service to the app, use the cloud store as a database and store the notes of the user and just see some services like analytics, crash analytics, and messaging that Firebase provides, these services you will be needing when you publish your apps as these will allow you to monitor the crashes and app performance.

Blockchain App Development Roadmap

Geekaid — Thu, 24 Nov 2022 06:22:15 +0000

Introduction

what is Blockchain

Blockchain is a method of saving information that makes it impossible or difficult for anyone to be changed, hacked, or manipulated. A blockchain is a distributed ledger that copies the ledger and sends that across the network of computers participating in the blockchain.

There are two types of Blockchain developers

Core Developers
App Developers

Core Developers

These developers focus on the architecture of a blockchain system. They design the protocols used by the network. They are the supervisor of the blockchain they take the most vital decisions related to the blockchain.

App developers

These developers use existing blockchains and develop apps that use the blockchain as their back end. These developers are similar to web developers who use create some web applications.

These app developers make decentralized apps also known as Dapps. They are responsible for the front end as well as the back end of the app.

Things you need to know before learning blockchain app development

Languages to learn

Solidity
Javascript

Solidity

Solidity is a statically typed object-oriented programing language that is specially designed by the Ethereum network team for building smart contracts.
It is used to create smart contracts that implement business logic.

Solidity is the most famous language for developing smart contracts.

you can learn solidity from solidity documentation and if you are not comfortable with using reading documentation and figuring out things on your own then you can refer to the dapp university youtube channel.

Javascript

Javascript is one of the most popular programming languages. You will be using javascript front-end frameworks to build the UI part of the application. To use Node.js and other libraries like Web3.js. You will be using javascript to connect the back-end part of the app i.e blockchain to the front-end. In simple words, you will be using it to put life into the app.

Tools you need

Truffle

Truffle provides the development and testing environment using the Ethereum virtual machine (EVM). You will be using truffle to make smart contracts as the truffle slogan says “Smart contracts made sweeter”. Truffle comes with great features that will help you build dapps.

Ganache

Ganache is a tool used to set up your own local Ethereum blockchain that you can use to deploy your apps and test them. Ganache give 10 Ethereum wallets with some Ethereum that you can use to test your apps and don’t get happy here the Ethereum you get has no value it is only for testing purpose.

Metamask

Metamask is a cryptocurrency wallet that enables its users to store ethers into it. Your web browser is incapable of communicating with dapps. The interaction between dapps happens in the form of transactions and Metamask helps us to do that. Metamask is used to interact with dapps.

These are the tools you will be needing to start to learn and build apps, to summarise it you need to learn solidity and javascript for the programming part, you going to need truffle suite and Metamask to test out the smart contract you have written and the dapp.