Overview:

In this tutorial i'll guide you some important foundations of flutter. These all are very simple, interesting and very useful things for you if you are new in Flutter App Development. We will help you to learn some basic's terminologies of Flutter. If you start implementing this than you will learn the complete basic's of Flutter App Development. All Important Foundations of Flutter are given below. Implement these all things one by one.


How to Add Image in Flutter From Assets:

In order to add image in Flutter App first of all create a new Assets folder in your project and than inside this folder create another folder and give them a name image. Now inside image folder add your images that you want to show in your Flutter Application. After adding the image in folder locate PubSpec.yaml file in your project and open it. Scroll down and find the assets section in Pub Spec file as shown in image below.

VS Code image


If you focus on the image you see after in assets section first of all i call assets folder and than i call the images folder and now after this use forward slash (/). Add the image name which is available in images folder and that you want to show in your Application. Like this..


  assets:
    - assets/images/flutter.png
  #   - images/a_dot_ham.jpeg

Let's suppose flutter.png is the image name. That i want to show in my Application so simply i call the image name using image extension. Extension means .png, .jpeg etc.

After that use this code in your Application to show the image.

 Image.asset("assets/images/flutter.png")

Just paste this code basically we use this code to show images in our Application. 


How to add Packages in our Flutter Applications:

It's very easy to add new packages in flutter Applications. Open PubSpec file and find the dependencies: section. In dependency section you will see cupertino_icons dependency. This dependency is added by Flutter below this dependency add other dependencies like Firebase Dependency, http dependency etc. For better understanding follow the image.




How to style the Text in Flutter:

If you want to style the text in flutter we have one text property which style he allows you edit the styling of text. Styling of text includes bold the text, italic the text, font weight, color and many other things. So how you can do this simply first of all create a text widget in your Application and write some text in it. Like this.

    Text("Flutter With NK")

Simply write the text and use the (,) and than type style keyword and again write one more keyword which is TextStyle() now inside this TextStyle() start styling your text. Press CTRL + Space to get suggestions. Check this example this is a simple example in which i'm styling my text.


Text(
        "Flutter With NK",
        style: TextStyle(
          color: Colors.black,
          fontSize: 16,
          fontWeight: FontWeight.bold
        ),
      )


How to add Fonts in Flutter:

Create an assets folder and inside this folder create a new folder for fonts. And than inside this folder add your custom font file. If you don't know how to get custom font's simply go to Google Font's and get your favourite font's from there. After add in the font in fonts folder. Open Pub Spec file and find the fonts: section. check the below image.





in fonts section simple first of all describe the family of your fonts. In my case it's HindiSiliguri in your case may be it's different. After adding the family in - asset section simply specify the location of your fonts with name. As you can see in the above picture my fonts are avilable in assets than fonts folder and my first font name is HindiSiliguri-..... So do like this. 

After this simply In Material App call Themedata and than themedata has one property which is fontFamily: so type the same family name here. Reload your App. Now your font is successfully applied in your whole Applicaiton. Follow the below code for more clearance.

MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          fontFamily: 'HindSiliguri',
          brightness: Brightness.light,
        ),
        home: const Home(),
      )

Add Internet permission in Flutter:

Internet permission is very important in App Development. So i will tell you how you can Add internet permission in your Flutter Application. So first of all open project Section find the android folder and open it. Inside android folder you will see one app folder click and open this. You will see another folder with src name and inside this you see one more folder which is main. Inside main folder you will see Mainfest.xml file open this file in IDE. In Manifest file you will see this code <application.....>. DO IT CAREFULLY.. Before application tag paste this line of code. This code will get the interent permission on runtime from your Users.

<uses-permission
android:name="android.permission.INTERNET"
/>


Also check out this image.