@override
Widget build(BuildContext context) {
  return Card(
    // Set elevation value here
    elevation: 4.0,
    child: Container(
      color: Palette.White, // set card's color
      padding: EdgeInsets.symmetric(vertical: 8.0), // Set layout padding
      child: Row(
        children: <Widget>[
      Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            title, // Set the text value
            style: TextStyles.caption, //Set your custom style here
          ),
          Text(
            body, // Set the text value
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.w500, // Set font weight
              color: Colors.black87, // Set text color
            ),
          ),
        ],
      ),
    ),
  ),
 ],
),
),
);
}

Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
 Image.asset('img/1.jpg'),
 Image.asset('img/2.jpg'),
 Image.asset('img/3.jpg'),
],
);

Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
 Image.asset('img/1.jpg'),
 Image.asset('img/2.jpg'),
 Image.asset('img/3.jpg'),
],
);

     new Row(
            mainAxisSize: MainAxisSize.min, // This is the magic. :)
             children: <Widget>[
               new RaisedButton(
                 padding: const EdgeInsets.all(8.0),
                 textColor: Colors.white,
                 color: Colors.blue,
                 onPressed: onClick, // Button onClick function
                 child: new Text("Button 1"),
               ),
               new RaisedButton(
                 onPressed: subtractNumbers,
                 textColor: Colors.white,
                 color: Colors.red,
                 padding: const EdgeInsets.all(8.0),
                 child: new Text(
                   "Button 2",
                 ),
               ),
               new RaisedButton(
                 onPressed: subtractNumbers,
                 textColor: Colors.white,
                 color: Colors.red,
                 padding: const EdgeInsets.all(8.0),
                 child: new Text(
                   "Button 3",
                 ),
               ),
             ],
           )

      new Row(
             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
             children: <Widget>[
               new RaisedButton(
                 padding: const EdgeInsets.all(8.0),
                 textColor: Colors.white,
                 color: Colors.blue,
                 onPressed: onClick, // Button onClick function
                 child: new Text("Plus"),
               ),
               new RaisedButton(
                 onPressed: subtractNumbers,
                 textColor: Colors.white,
                 color: Colors.red,
                 padding: const EdgeInsets.all(8.0),
                 child: new Text(
                   "Minus",
                 ),
               ),
             ],
           )

1. This button will need to be created in the build of a State of a StatefulWidget
2. The State must have a member variable bool isPressed = false;;
      new Row(
             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
             children: <Widget>[
               
               new RaisedButton(
                 child: new Text('Toggle me!'),
                 textColor: Colors.white,
                 shape: new RoundedRectangleBorder(
                   borderRadius: new BorderRadius.circular(30.0),
                 ),
                 color: isPressed ? Colors.grey : Colors.blue,
                 onPressed: () => setState(() => isPressed = !isPressed), // make state changes in a setState
               )
             ],
           )

 return new Scaffold(
     appBar: new AppBar(
       title: new Text("FAB Example"),
     ),
     floatingActionButton: FloatingActionButton(
       onPressed: () => {},
       tooltip: 'Add me!',
       child: Icon(Icons.add),
     ),
     body:...
  );

  return new Scaffold(
      appBar: new AppBar(
        title: new Text("AppBar Demo"),
      ),);
      

 return new Scaffold(
     appBar: new AppBar(
       title: new Text("FAB Example"),
     ),
     bottomNavigationBar:BottomNavigationBar(
       currentIndex: 0,   // Set initial state of BottomNavigationBar
       items: [           // Create your BottomNavigationBar items
         BottomNavigationBarItem(
           icon: new Icon(Icons.playlist_add),
           title: new Text("Playlist"),
         ),
         BottomNavigationBarItem(
           icon: new Icon(Icons.person),
           title: new Text("My Profile")
         ),
         BottomNavigationBarItem(
           icon: new Icon(Icons.mail),
           title: new Text("Inbox")
         )
       ],
     ),
     body:...
  );

 return new Scaffold(
     appBar: new AppBar(
       title: new Text("FAB Example"),
     ),
         bottomNavigationBar: Theme(  // Create your custom style with Flutter Theme
       data: Theme.of(context).copyWith(
           canvasColor: Colors.blueAccent, // Choose your preferred color as the BottomNavigationBar background
           primaryColor: Colors.white30, // Choose your preferred color as the primary color
           textTheme: Theme.of(context) // The text theme goes here
               .textTheme
               .copyWith(caption: new TextStyle(color: Colors.white))),
       child: BottomNavigationBar(
         currentIndex: 0, // Set initial state of BottomNavigationBar
         items: [          // Create your BottomNavigationBar items
           BottomNavigationBarItem(
             icon: new Icon(Icons.playlist_add),
             title: new Text("Playlist"),
           ),
           BottomNavigationBarItem(
               icon: new Icon(Icons.person), title: new Text("My Profile")),
           BottomNavigationBarItem(
               icon: new Icon(Icons.mail), title: new Text("Inbox"))
         ],
       ),
     ),
     body:...
  );

      class _FreeDemoState extends State<FreeDemo> {
             int _currentIndex = 0;
             final List<Widget> _children = [];
            ...

   // Declare all the widgets you want to navigate on bottom bar item click
   final List<Widget> _children = [
   PlaceholderWidget(Colors.white), 
   PlaceholderWidget(Colors.green),
   PlaceholderWidget(Colors.blue)
 ];

   void onTabTapped(int index) {
  setState(() {
    _currentIndex = index;
  });
}

import 'package:flutter/material.dart';

class PlaceholderWidget extends StatelessWidget {
 final Color color;

 PlaceholderWidget(this.color);

 @override
 Widget build(BuildContext context) {
   return Container(
     color: color,
     child: new Center(
       child: new Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           new Text(
             'Try me!',
             style: new TextStyle(
               fontWeight: FontWeight.bold,
               fontSize: 100.0,
               fontFamily: 'Roboto',
             ),
           ),
          ...
         ],
       ),
     ),
   );
 }
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('My Flutter App'),
    ),
    bottomNavigationBar: Theme(
         data: Theme.of(context).copyWith(
             canvasColor: Colors.blueAccent,
             primaryColor: Colors.white30,
             textTheme: Theme.of(context)
                 .textTheme
                 .copyWith(caption: new TextStyle(color: Colors.white))),
         child: BottomNavigationBar(
           currentIndex: _currentIndex, // Set the value of _currentIndex to currentIndex
           onTap: onTabTapped,       // Set the onTabTapped function we creatd earlier
           items: [
             BottomNavigationBarItem(
               icon: new Icon(Icons.playlist_add),
               title: new Text("Playlist"),
             ),
             BottomNavigationBarItem(
                 icon: new Icon(Icons.person), title: new Text("My Profile")),
             BottomNavigationBarItem(
                 icon: new Icon(Icons.mail), title: new Text("Inbox"))
           ],
         ),
       ),
       body:_children[_currentIndex] // Change Widget based on item selected
  );
}

return MaterialApp(
   home: DefaultTabController(
     length: 3, // The number of tabs / content sections we need to display
     child:.. // See next step!
   ),
 );

    return MaterialApp(
   home: DefaultTabController(
     length: 3,
     child: Scaffold(
       appBar: AppBar(
         bottom: TabBar(
           tabs: [
             Tab(icon: Icon(Icons.home)),
             Tab(icon: Icon(Icons.people)),
             Tab(icon: Icon(Icons.mail)),
           ],
         ),
         title: Text('Flutter Tabs Example'), // You can declare a title for your tab
       ),
       body: ... // See next step for this!
     ),
   ),
 );

         return MaterialApp(
   home: DefaultTabController(
     length: 3,
     child: Scaffold(
       appBar: AppBar(
         bottom: TabBar(
           tabs: [
             Tab(icon: Icon(Icons.home)),
             Tab(icon: Icon(Icons.people)),
             Tab(icon: Icon(Icons.mail)),
           ],
         ),
         title: Text('Flutter Tabs Example'),
       ),
       body: TabBarView(
         children: [
           FirstPlaceHolder(), // Create a widget class called FirstPlaceHolder
           SecondPlaceHolder(), // Create a widget class called SecondPlaceHolder
           ThirdPlaceHolder() //// Create a widget class called ThirdPlaceHolder
         ],
       ),
     ),
   ),
 );

import 'package:flutter/material.dart';
import 'package:oamp/app/screens/form_validation.dart';
import 'package:oamp/app/screens/place_holder.dart';

class FreeDemo extends StatefulWidget {
 @override
 State<StatefulWidget> createState() {
   return new FreeDemoState();
 }
}

class FreeDemoState extends State<FreeDemo>
   with SingleTickerProviderStateMixin {
 int _selectedIndex = 0;

 final drawerItems = [
   new DrawerItem("Home", Icons.home),
   new DrawerItem("Menu", Icons.fastfood),
   new DrawerItem("Favorites", Icons.favorite)
 ];
 _getDrawerItemScreen(int pos) {
   return new PlaceholderWidget(Colors.white);
 }

 _onSelectItem(int index) {
   setState(() {
     _selectedIndex = index;
     _getDrawerItemScreen(_selectedIndex);
   });
   Navigator.of(context).pop(); // close the drawer
 }
 @override
 Widget build(BuildContext context) {
   List<Widget> drawerOptions =[];
   for(var i=0; i<drawerItems.length;i++){
     var d=drawerItems[i];
     drawerOptions.add(new ListTile(
       leading: new Icon(d.icon),
       title: new Text(
         d.title,
         style: new TextStyle(fontSize: 19.0, fontWeight: FontWeight.w400),
       ),
       selected: i == _selectedIndex,
       onTap: () =>_onSelectItem(i),
     ));
   }
   return Scaffold(
         appBar: AppBar(
           title: Text('Navigation Drawer Example'),
         ),
         drawer: new Drawer(
           child: ListView(
             // Important: Remove any padding from the ListView.
             padding: EdgeInsets.zero,
             children: <Widget>[
               new UserAccountsDrawerHeader(
                   accountName: new Text(
                     "Temidayo Adefioye",
                     style: new TextStyle(
                       fontWeight: FontWeight.w500, fontSize: 18.0
                     ),
                   ),
                   accountEmail: Text(
                     "[email protected]",
                     style: new TextStyle(
                       fontSize: 18.0, fontWeight: FontWeight.w500
                     ),
                   ),
               currentAccountPicture: CircleAvatar(
                 backgroundColor: Colors.white,
                 child: Text('TA'),
               ),),
               new Column(children: drawerOptions,)
             ],
           ),
         ),
         body: _getDrawerItemScreen(_selectedIndex),
   );
 }
}
class DrawerItem {
 String title;
 IconData icon;

 DrawerItem(this.title, this.icon);
} 

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
  final appTitle = 'Form Validation Demo';

  return MaterialApp(
    title: appTitle,
    home: Scaffold(
      appBar: AppBar(
        title: Text(appTitle),
      ),
      body: SingleChildScrollView(
        child: ValidationDemo(),
      )
    ),
  );
}
}

class ValidationDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
  return new ValidationDemoState();
}
}

class ValidationDemoState extends State<ValidationDemo> {
// Note: This is a GlobalKey<FormState>, not a GlobalKey<ValidationDemoState>!
final _formKey = GlobalKey<FormState>();
// Declare a default bool variable isPasswordVisible and initialize to false. 
// This is the default state of the password visibilty.
bool isPasswordVisible = false;
@override
Widget build(BuildContext context) {
  return new Container(
    margin: new EdgeInsets.all(15.0),
    child: new Form(
      key: _formKey, // Set the _formKey here
      child: formUI(), // Set your custom widget here
    ),
  );
}
// Build a custom widget for your app
Widget formUI() {
  return new Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      new TextFormField(
        decoration: const InputDecoration(labelText: 'Username'), // Create an optional decoration for your TextFormField
        validator: _validateUsername,
      ),
      new TextFormField(
        decoration: const InputDecoration(labelText: 'Email'),
        validator: _validateEmail,
        keyboardType: TextInputType.emailAddress,
      ),
      new TextFormField(
        keyboardType: TextInputType.text,
        validator: _validatePassword,
        obscureText: isPasswordVisible, //This will obscure text dynamically
        decoration: InputDecoration(
          labelText: 'Password',
          hintText: 'Enter your password',
          // Here is key idea
          suffixIcon: IconButton(
            icon: Icon(
              // Based on passwordVisible state choose the icon
              isPasswordVisible ? Icons.visibility : Icons.visibility_off,
              color: Theme.of(context).primaryColorDark,
            ),
            onPressed: () {
              // Update the state i.e. toogle the state of passwordVisible variable
              setState(() {
                isPasswordVisible
                    ? isPasswordVisible = false
                    : isPasswordVisible = true;
              });
            },
          ),
        ),
      ),
      Padding(
          padding: const EdgeInsets.symmetric(vertical: 16.0),
          child: RaisedButton(
            onPressed: () {
              if (_formKey.currentState.validate()) {
                Scaffold.of(context)
                    .showSnackBar(SnackBar(content: Text('Processing data')));
              }
            },
            child: Text('Submit'),
          ))
    ],
  );
}

String _validateEmail(String value) {
  if (value.isEmpty) {
    return 'Email field cannot be empty!';
  }
  // Regex for email validation
  String p = "[a-zA-Z0-9\+\.\_\%\-\+]{1,256}" +
      "\\@" +
      "[a-zA-Z0-9][a-zA-Z0-9\\-]{0,64}" +
      "(" +
      "\\." +
      "[a-zA-Z0-9][a-zA-Z0-9\\-]{0,25}" +
      ")+";
  RegExp regExp = new RegExp(p);
  if (regExp.hasMatch(value)) {
    return null;
  }
  return 'Email provided isn\'t valid.Try another email address';
}
 _validatePassword(String value){
  if(value.isEmpty){
    return 'Password field cannot be empty';
  }

  if(value.length<6){
    return 'Password length must be greater than 6';
  }
}
 _validateUsername(String value){
  if(value.isEmpty){
    return 'Username  cannot be empty';
  }

  if(value.length<6){
    return 'Username length must be greater than 6';
  }
}
}