Flutter Widgets Style

Normal application tree
1) MaterialApp [title,theme,home]
2) Scaffold [appBar,body]
3) SingleChildScrollView [child]
4) Column [children]
5) Container [child]
6) Card [child]

MaterialApp

class MyApp1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Personal Expenses',
      theme: ThemeData(
        primarySwatch: Colors.purple,
        accentColor: Colors.amber,
      ),
      home: MyHomePage(),
    );
  }
}

Column

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text('test1' ),
    Text('test2' ),
  ],
)

Container

Container(
  margin: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
  decoration: BoxDecoration(border: Border.all(color: Colors.purple, width: 2) ),
  padding: EdgeInsets.all(10),
  child: Text('test' ),
)

Text

Text('\$${tx.amount}',
     style: TextStyle( fontWeight: FontWeight.bold, fontSize: 20, color: Colors.purple)
    )

TextField   (For Data Entry)

final titleController = TextEditingController();

TextField(
  decoration: InputDecoration(labelText: 'Title'),
  controller: titleController,
  keyboardType: TextInputType.number,),

OR

String titleInput;

TextField(
  decoration: InputDecoration(labelText: 'Title'),
  onChanged: (val) {
     titleInput = val;
   },
),

TextField keyboardType: 
- TextInputType.number
- TextInputType.datetime
- TextInputType.emailAddress
- TextInputType.multiline
- TextInputType.phone
- TextInputType.url
- TextInputType.visiblePassword

FlatButton

FlatButton(
  child: Text('Submit'),
  textColor: Colors.purple,
  onPressed: () {
    print(titleController.text);
    print(titleInput);
  },
),

Card

Card(
      elevation: 5,    //drop shadow
      child: Text('Test' )
)

Scroll: To avoid widgets overflow, surround all widgets with scrollbar
SingleChildScrollView()

ListView: it is column with scroll
ListView(
  children: <Widget>[
    Text('test1' ),
    Text('test2' ),
  ],
)

ListView.builder: it is column with scroll but render only the visible items not all items
ListView.builder(
  itemBuilder: (ctx, index) {
    return Text('test2'+ index);
  },
  itemCount: 5,
)


Titlebar icon and FloatingActionButton

To add icon on AppBar use Actions: iconButton
To add float icon on footer use floatActionButton
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Flutter App'),
      actions: <Widget>[
        IconButton(
          icon: Icon(Icons.add),
          onPressed: () => {  },
        ),
      ],
    ),

    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    floatingActionButton: FloatingActionButton(
      child: Icon(Icons.add),
      onPressed: () => { } ,
    ),
  );
}

Popup Modal
    showModalBottomSheet(
      context: buildContext,
      builder: (_) {
        return GestureDetector(
          onTap: () {},
          child: null,
          behavior: HitTestBehavior.opaque,
        );
      },
    );



Expanded(child:null),

FractionallySizedBox(heightFactor: 0.7, child:null), 

SizedBox(height: 4),

Padding(padding: EdgeInsets.all(10), child:null),

FittedBox(child:null),

Container( height: 200, child: Image.asset('assets/images/waiting.png', fit: BoxFit.cover)),

CircleAvatar(radius: 30, child:null),

IconButton( icon: Icon(Icons.delete),
    color: Theme.of(context).errorColor,
    onPressed: () {}
),

ListTile(
  leading: null,
  title: null,
  subtitle: null,
  trailing:null,
),

showDatePicker(
              context: context,
              initialDate: DateTime.now(),
              firstDate: DateTime(2019),
              lastDate: DateTime.now(),
              ).then((pickedDate) {
                                    if (pickedDate == null) {
                                    return;
                                    }
                                    setState(() {
                                    _selectedDate = pickedDate;
                                    });
              });