Assets and Widgets : Flutter

Task 1

Here we will discuss about adding Assets to your project and using widgets to use these assets and build a functioning app

Assets

Flutter apps can include both code and assets (sometimes called resources). An asset is a file that is bundled and deployed with your app, and is accessible at runtime.

Common types of assets include static data (for example, JSON files), configuration files, icons, and images (JPEG, WebP, GIF, animated WebP/GIF, PNG, BMP, and WBMP).

Flutter uses the pubspec.yaml file, located at the root of your project, to identify assets required by an app.

name: eventpagetask
description: Task 1

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true
  assets:            #Indentation is important while adding files
    - logo.png       #Files to be used as assets are provided here
    - oc.png
    - hawkeye.png
    - gambit.png
    - cicada.png 

Steps to add and use Assets in your Project:

• Create assets folder in your project subdirectory
• Copy all images to be used as font into this directory
• Goto pubspec.yaml file in your project and make the necessary changes as shown above
• Use the Image Assets in your program freely using Image.asset()

...
   
    return Container(
       child: Image.asset('logo.png'),
    );

....

Commonly Used Widgets

---

Container

For documentation click here...

A convenience widget that combines common positioning,containing and sizing widgets.

A container first surrounds the child with padding (inflated by any borders present in the decoration) and then applies additional constraints to the padded extent (incorporating the width and height as constraints, if either is non-null). The container is then surrounded by additional empty space described from the margin.

Containers with no children try to be as big as possible unless the incoming constraints are unbounded, in which case they try to be as small as possible. Containers with children size themselves to their children. The width, height, and constraints arguments to the constructor override this.

Widget tile(...)
  {
      ...
      return Container(
        height: ...
        margin: ...
        decoration: BoxDecoration(
          shape: ...
          color: ...
          borderRadius: ...
        ),
        child: Row(children: 
          <Widget>[
             ...
             //Contains children Widgets for Row
             ...
          ],
        )
      );
}

Column

For documentation click here

Column Widget allows a user to arrange its contents vertically.

import 'package:flutter/material.dart';

void main() => runApp(AppTask_1()); //The execution begins here where all the runApp being a function from the imported package executes a constructor of AppTask_1

class AppTask_1 extends StatelessWidget 
{
  @override
  Widget build(BuildContext context) 
  {
    return MaterialApp(
      title: ...
      home: EventPage(title: 'Page_Events'), // an object of EventPage class is sent as parameter for home
    );
  }
}

class EventPage extends StatefulWidget 
{
  EventPage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _EventPageState createState() => _EventPageState();
}

class _EventPageState extends State<EventPage> 
{
  
  Widget tile({String title,String logo,String date, String venue ,String time,BuildContext context})
  {
      ...
      ...
  }


  @override
  Widget build(BuildContext context) 
  {
    return Scaffold(
      appBar: AppBar(
        ...
        title: Text("IECSE Events"),
      ),
      body: Center(          //This center aligns whatever widget is provided to Center as child
        child: Column(       //Column Widget is used to arrange the different tiles vertically
            children: <Widget>[
            tile(...),
            ...
            ... //Call the tile method to return Containers which get distributed in Columns here
          ]
        ),
      ),
    );
  }
}

Row

For Documentation click [here](For documentation click here...

As we see Column distributes content vertically, Row is used for horizontal distribution of contents.

As you see in the example content is horizontally distributed in each tiles, so we need to use a Row Widget

....

Widget tile({String title,...})
{
      Size size = MediaQuery.of(context).size; //Used to take dimensions of the device to make custom apps

      return Container(             //Tile is take as a container
        height: ... //Denotes height of each Tile
        margin: ... //Used for leaving empty space around the Container
        decoration: BoxDecoration(
            ... //Used to Add background, shape, colour gradient, or images to Container
        ),
        child: Row(children: 
          <Widget>[
            Container(
              width: ... //Provided with width of first component
              child: ... //Widget which the container will hold example Text(), Image.asset()
            ),
            Container(
              ...
            ),
            Container(
              ...
            )
          ],
        )
      );
  }
....

Links

• Use Rows And Columns - Medium
• Container Cheat Sheet - Medium
• Functions in Dart - Dart.Dev