Hi! I’m Ye Htet Aung, working as a PHP Developer at Spiceworks Myanmar Co., Ltd. Today I would like to share about  Basic Flutter Widget for Developers.

• About Basic Widget And Widgets code example

1. Text: The Text widget lets you create a run of styled text within your application.

      
import 'package:flutter/material.dart'; 
void main() { 
	runApp( 
	Center( 
	child: Text( 
		'Hello, world!',
 		), 
	    ), 
	); 
}

2.Row, Column: These flex widgets let you create flexible layouts in both the horizontal (Row) and vertical (Column) directions. Its design is based on the web’sflexbox layout model.

      
Row(
 children: [ 
Expanded( child: Text('Deliver features faster', textAlign: TextAlign.center), 
	),
Expanded( child: Text('Craft beautiful UIs', textAlign: 	TextAlign.center), 
	),  
     ],
 );

Column( 
children: [ 
   Text('We move under cover and we move as one'), 
  Text('Through the night, we have one shot to live another day'), 
  Text('We cannot let a stray gunshot give us away'), 
  Text('The code word is ‘Rochambeau,’ dig me?'), 
  Text('Rochambeau!', style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0)), ], )

3.Container: The  Container  widget lets you create a rectangular visual element. A container can be decorated with a BoxDecoration, such as a background, a border, or a shadow. A  Container can also have margins, padding, and constraints applied to its size. In addition, a  Container can be transformed in three dimensional space using a matrix.

      
Center( 
	child: Container( 
	margin: const EdgeInsets.all(10.0), 
	color: const Color(0xFF00FF00),
 	width: 48.0, 
	height: 48.0, 
	),
          )
     )

4.CircleAvatar: Typically used with a user’s profile image, or, in the absence of such an image, the user’s initials. A given user’s initials should always be paired with the same background color, for consistency.

      
CircleAvatar(
  backgroundImage: NetworkImage(userAvatarUrl),
)

5.ListView : a column-like widget, automatically provides scrolling when its content is too long for its render box.

      
Widget _buildList() => ListView(
      children: [
        _tile('CineArts at the Empire', '85 W Portal Ave', Icons.theaters),
        _tile('The Castro Theater', '429 Castro St', Icons.theaters),
        _tile('Alamo Drafthouse Cinema', '2550 Mission St', Icons.theaters),
        _tile('Roxie Theater', '3117 16th St', Icons.theaters),
        _tile('United Artists Stonestown Twin', '501 Buckingham Way',
            Icons.theaters),
        _tile('AMC Metreon 16', '135 4th St #3000', Icons.theaters),
        Divider(),
        _tile('Kescaped_code#39;s Kitchen', '757 Monterey Blvd', Icons.restaurant),
        _tile('Emmyescaped_code#39;s Restaurant', '1923 Ocean Ave', Icons.restaurant),
        _tile(
            'Chaiya Thai Restaurant', '272 Claremont Blvd', Icons.restaurant),
        _tile('La Ciccia', '291 30th St', Icons.restaurant),
      ],
    );

ListTile _tile(String title, String subtitle, IconData icon) => ListTile(
      title: Text(title,
          style: TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: 20,
          )),
      subtitle: Text(subtitle),
      leading: Icon(
        icon,
        color: Colors.blue[500],
      ),
    );

Use Stack to arrange widgets on top of a base widget—often an image. The widgets can completely or partially overlap the base widget.

      
Widget _buildStack() => Stack(
    alignment: const Alignment(0.6, 0.6),
    children: [
      CircleAvatar(
        backgroundImage: AssetImage('images/pic.jpg'),
        radius: 100,
      ),
      Container(
        decoration: BoxDecoration(
          color: Colors.black45,
        ),
        child: Text(
          'Mia B',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
    ],
  );

I hope you will enjoy to read this post and next time I will share more interesting post.