4. Flutter Tutorial for Beginners – Basic about widgets

0
579

In flutter, everything is a widget. Text, Icon, Image, RaisedButton, AppBar, Row, Column, Container, GridView, ListView, PageView, Scrollable, Center, Padding, Sizebox, Expanded etc. We’ll learn each of them step by step.

 

Text Widget: A Text widget holds some text to display on the screen.

Text("Test Page"),

Important Properties:

  • textAlign: Alignment of texts.
  • style: Change the font style, font size, font family etc.

Example:

Text(
  'Hello, World!',
  textAlign: TextAlign.center,
  style: new TextStyle(fontWeight: FontWeight.bold),
)

Image Widget: The Image widget holds an image and can fetch it from multiple sources like assets or even directly from a URL.

Image(
  image: AssetImage('assets/logo.png'), 
)

Important Properties:

  • image: Location of the image.
  • width: Width of the image
  • height: Height of the image
  • fit: How to inscribe the image into the space allocated during layout.

Example:

Image(
  image: AssetImage('assets/logo.png'),
  width: 300,
  height: 100,
  fit: BoxFit.fill,
)

Icon Widget: The icon widget is a container for an icon in Flutter.

Icon(
  Icons.add, 
)

Important Properties:

  • size: The size attribute to enlarge the icon.

 Example:

Icon(
  Icons.add,
  size: 36.0,
)

RaisedButton Widget: A RaisedButton widget allows a user to perform some action on click.

RaisedButton(
  child: Text("Click here"),
)

Important Properties:

  • onPressed: The onPressed property allows some action to be performed when the button is clicked.
  • child: Button text

Example:

RaisedButton(
  child: Text("Click here"),
  elevation: 5.0,
  onPressed: () {
    // Do something here
  },
)

ListTile Widget:

ListTile(
  title: Text('Hello World'), 
)

Important Properties:

  • leading: A widget to display before the title.
  • subtitle: Additional content displayed below the title.

Example:

ListTile(
  leading: Icon(Icons.ac_unit),
  title: Text('Hello World'),
  subtitle: Text('This is the subtitle'),
)

Scaffold Widget: A Scaffold Widget provides a framework for adding common material design elements such as AppBars, Drawers, Floating Action Buttons, Bottom Navigation, etc.

Scaffold(
  appBar: new AppBar(
    title: new Text('Title'),
  ),
  body: Center(
  ),
  floatingActionButton: FloatingActionButton(
      child:Icon(Icons.add),
      onPressed: () {
      }
  ),

Important Properties:

  • drawer: Develop a drawer menu
  • key: A Key is an identifier for Widgets

Example:

Scaffold(
  appBar: new AppBar(
    title: new Text('Title'),
  ),
  key: _key,
  drawer: Drawer(
    child: ListView(
      children: [
        Text('Element 1'),
        Text('Element 2'),
        Text('Element 3'),
      ],
    ),
  ),
  body: Center(
  ),
  floatingActionButton: FloatingActionButton(
      child:Icon(Icons.add),
      onPressed: () {
      }
  ),
)

Column Widget: A Column is a widget which arranges all its children widgets in a vertical stack.

Column(
  children: [
    new Text(
      "Element 1",
    ),
    new Text(
        "Element 2"
    ),
    new Text(
        "Element 3"
    ),
  ],
)

Important Properties:

  • mainAxisAlignment: Alignment of the children widgets.

Example:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    new Text(
      "Element 1",
    ),
    new Text(
        "Element 2"
    ),
    new Text(
        "Element 3"
    ),
  ],
)

Row Widget: A row is the same as a column but constructs a horizontal row of widgets rather than a column. The main difference here is the main axis is the horizontal axis rather than the vertical one. The cross axis is the vertical axis.

Row(
  children: [
    new Text(
      "Element 1",
    ),
    new Text(
        "Element 2"
    ),
    new Text(
        "Element 3"
    ),
  ],
)

Important Properties:

  • mainAxisAlignment: Alignment of the children widgets.

Example:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    new Text(
      "Element 1",
    ),
    new Text(
        "Element 2"
    ),
    new Text(
        "Element 3"
    ),
  ],
)

Container Widget: Many layouts make liberal use of Containers to separate widgets using padding, or to add borders or margins. You can change the device’s background by placing the entire layout into a Container and changing its background color or image.

Container(
  child: Text('Hello World!'),
)

Important Properties:

  • decoration: To give border, background etc.
  • margin: Set margins

Example:

Container(
  decoration: BoxDecoration(
    border: Border.all(width: 10, color: Colors.black38),
    borderRadius: const BorderRadius.all(const Radius.circular(8)),
  ),
  margin: const EdgeInsets.all(4),
  child: Text('Hello World!'),
)

Center Widget: A Center widget simply centers the child inside it.

Center(
  child: Text('hello World!'),
)

Padding Widget: Unlike in normal Android development where every view has its own padding attribute, padding is a widget that wraps other widgets to give them padding in all or specified directions.

Padding(
  padding: EdgeInsets.all(10.0),
  child: new Text(
    "Element 1",
  ),

Expanded widget: A widget that expands a child of a Row, Column, or Flex so that the child fills the available space.

Scaffold(
  appBar: AppBar(
    title: Text('Expanded Column Sample'),
  ),
  body: Center(
    child: Column(
      children: [
        Container(
          color: Colors.blue,
          height: 100,
          width: 100,
        ),
        Expanded(
          child: Container(
            color: Colors.amber,
            width: 100,
          ),
        ),
        Container(
          color: Colors.blue,
          height: 100,
          width: 100,
        ),
      ],
    ),
  ),
)

LEAVE A REPLY

Please enter your comment!
Please enter your name here