Tuesday, July 21, 2020

Flutter Custom UI Designs and Animations

........................................................................................................................................................................................................................................
Example :#1
























SafeArea 
Expanded 
Wrap 
AnimatedContainer 
Opacity 
LayoutBuilder 
PageView 
Table 
SliverAppBar 
SliverList & SliverGrid
FadeInImage 
StreamBuilder 
InheritedModel 
ClipRRect 
Hero 
CustomPaint 
Tooltip 
FittedBox 
LayoutBuilder 
.......................................................................................................................................................................................................................
1. How to Remove Debug Banner in Flutter?
When you create a new Flutter project for the first time you might have seen the Debug Banner on Right Top Corner of the application. Now a question arises that How to Remove Debug Banner in Flutter?
  • Add debugShowCheckModeBanner: false in MaterialApp() 
Widget and that should remove the banner on hot reload.

MaterialApp(
  debugShowCheckedModeBanner: false
)
Note - The Debug Banner will also automatically be removed on a release build.




Loading







Tips #1
leading: InkWell(
          child: Icon(Icons.menu),
          onTap: () {
            print("click menu");
          },
        ),
Tips #2
iconTheme: IconThemeData(color: Colors.white, size: 20, opacity: 0.9),
Tips #3
textTheme
 textTheme: TextTheme(title: TextStyle(color: Colors.white,fontSize: 30)),
Tips #4
 brightness: Brightness.dark,



Tips #5
AppBar({
    Key key,
    this.leading,
    this.automaticallyImplyLeading = true,
    this.title,
    this.actions,
    this.flexibleSpace,
    this.bottom,
    this.elevation = 4.0,
    this.backgroundColor,
    this.brightness,
    this.iconTheme,
    this.textTheme,
    this.primary = true,
    this.centerTitle,
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,
    this.toolbarOpacity = 1.0,
    this.bottomOpacity = 1.0,
  }) 



Tips #6[<]
automaticallyImplyLeading
If you don’t want the left-arrow on the app bar. you can use this parameter to hide it.
  • automaticallyImplyLeading: false

Tips #7
import 'package:flutter/material.dart';

void main()=>runApp(MaterialApp(home: MyApp(),));

class MyApp extends StatelessWidget{
  @override  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
        bottom: PreferredSize(
          child: Container(
            alignment:Alignment.center,
            color: Colors.green,
            constraints: BoxConstraints.expand(height: 50),
            child: Text('Hello'),
          ),
          preferredSize: Size(50, 50),
        ),
      ),
      body: Center(

      ),
    );
  }

}




Tips #8[How to fix bottom overflowed when keyboard shows error in Flutter?]
Below two way resolved the problem, but page will not be scroll
so my choice is SingleChildScrollView.
body: Center(
child: SinglechildScrollView(
...//
)
);
Note - We can do one at a time, don't mix it 
 resizeToAvoidBottomPadding: false,


 resizeToAvoidBottomPadding: false,
 resizeToAvoidBottomInset: false,
or
How to fix bottom overflowed when keyboard shows error in Flutter?
Scaffold(
resizeToAvoidBottomInset:false
);
or
body: Center(
child: SinglechildScrollView(

)
);
Tips #9


Tips #10
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        
        primarySwatch: Colors.blue,

        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }
}
.......................................................................................................................................................................................................................................
How to change Status Bar Color
Only Android


void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.blue,          // navigation bar color
    statusBarColor: Colors.pink,             // status bar color
  ));
}

or

void main() async {
  SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(statusBarColor: Colors.red));
  runApp(MaterialApp(
    home: MyApp(title: 'Hello Word'),
  ));
}

Both iOS and Android:


appBar: AppBar(
  backgroundColor: Colors.red,         // status bar color
  brightness: Brightness.light,         // status bar brightness
)


To apply for all app bars:

return MaterialApp(
  theme: Theme.of(context).copyWith(
    appBarTheme: Theme.of(context)
        .appBarTheme
        .copyWith(brightness: Brightness.light),
  ...
  ),

Hide Status bar

void main() {
  SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
  runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
    
      home: SplashScreen()));
}

You can add the below code in your main function to hide status bar.

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.transparent,
));

...............
 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
 ));

For single page

@override
  void initState() {
    SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
    super.initState();
  }

  @override
  void dispose() {
    SystemChrome.setEnabledSystemUIOverlays(
        [SystemUiOverlay.top, SystemUiOverlay.bottom]);
    super.dispose();
  }



.......................................................................................................................................................................................................................................
Space-around vs space-evenly

Items spread across the screen however keeps equal space in
between (Space between)

items are evenly distributed in the line with equal space
around them (space around).



.......................................................................................................................................................................................................................................
How to Setup Height of the AppBar in Flutter ?

appBar: PreferredSize(
  preferredSize: Size.fromHeight(100.0),
  child: AppBar(
    automaticallyImplyLeading: false, // hides leading widget
    title:Text('Hello world'),
  )
),

.........................................................................................................................................................................................................................
Example :#2[ Flutter AppBar Design]
import 'package:flutter/material.dart';
void main() {
  runApp(new MyApp());
}
class MyApp extends StatelessWidget {

  @override  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Generated App',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
        primaryColor: const Color(0xFF2196f3),
        accentColor: const Color(0xFF2196f3),
        canvasColor: const Color(0xFFfafafa),
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State {
  @override  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
      iconTheme: IconThemeData(color: Colors.white, size: 20, opacity: 0.9),
        title: new Text('App Name'),
        actions: [
          // action button         
              Ink(
            child: IconButton(
              icon: Icon( Icons.search ),
              onPressed: () { },
            ),
          ),
          Ink(
            child: IconButton(
              icon: Icon( Icons.search ),
              onPressed: () { },
            ),
          ),
        ],
        leading: IconButton(
          icon: Image.asset('assets/logo.png'),
          onPressed: () { },
        ),

      ),
    );
  }
}


Now, we will add Leading and Action in setting icon in an AppBar Widget so our updated App bar widget will look like below.

appBar: AppBar(
          leading: IconButton(
            tooltip: 'Leading Icon',
            icon: const Icon(
              Icons.arrow_back,
            ),
            onPressed: () {
              // To do
            },
          ),
          title: const Text(
            'Categories',
          ),
          actions: <Widget>[
            IconButton(
              tooltip: 'Action Icon',
              icon: const Icon(
                Icons.settings,
              ),
              onPressed: () {
                // To do
              },
            ),
          ],
        ),

AppBar with centered Title and Subtitle

    AppBar(
        automaticallyImplyLeading: false,
        title: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "Title",
                style: TextStyle(fontSize: 18.0),
              ),
              Text(
                "subtitle",
                style: TextStyle(fontSize: 14.0),
              ),
            ],
          ),
        ),
      ),

AppBar with Text and Icon Themes

 AppBar(
        backgroundColor: Colors.blueAccent,
        title: Text("Title"),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {},
          ),
        ],
        iconTheme: IconThemeData(
          color: Colors.white,
        ),
        textTheme: TextTheme(
          title: TextStyle(
            color: Colors.white,
            fontSize: 20.0
          ),
        ),
      ),

.................................................
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen() : super();
  static const String title = 'Home';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(title),
      ),
      body: Container(
        child: Column(  
          children: [
            
          ],
        ),
      ),
    );
  }
}

.........................................................................................................................................................................................................................
Example :#3 [ Flutter AppBar and Search Bar]
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
      home: MyApp(),
    ));

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
  bool isSearching = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange,
        title: !isSearching
            ? Text('Home')
            : TextField(
                decoration: InputDecoration(
                  hintText: 'Search here',hintStyle: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),
                    icon: Icon(Icons.search, color: Colors.white)),
              ),
        actions: <Widget>[
          isSearching
              ? IconButton(
                  onPressed: () {
                    setState(() {
                      this.isSearching = false;
                    });
                  },
                  icon: Icon(
                    Icons.cancel,
                    size: 22,
                    color: Colors.white,
                  ),
                )
              : IconButton(
                  onPressed: () {
                    setState(() {
                      this.isSearching = true;
                    });
                  },
                  icon: Icon(
                    Icons.search,
                    size: 22,
                    color: Colors.white,
                  ),
                )
        ],
      ),
      body: Center(),
    );
  }
}

.........................................................................................................................................................................................................................
Example :#4 [ Flutter Basic AppBar Design]

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}
class MyApp extends StatelessWidget {

  @override  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Generated App',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
        primaryColor: const Color(0xFF2196f3),
        accentColor: const Color(0xFF2196f3),
        canvasColor: const Color(0xFFfafafa),
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State {
  @override  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: new Text('App Name'),

        actions: [
          // action button          
            IconButton(
            icon: Icon( Icons.search ),
            onPressed: () { },
          ),

        ],
        leading: IconButton(
          icon: Image.asset('assets/logo.png'),
          onPressed: () { },
        ),

      ),
    );
  }
}
.........................................................................................................................................................................................................................
Example :#5 [Flutter AppBar]
import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}class MyApp extends StatelessWidget {

  @override  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Generated App',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
        primaryColor: const Color(0xFF2196f3),
        accentColor: const Color(0xFF2196f3),
        canvasColor: const Color(0xFFfafafa),
      ),
      home: new MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override  _MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State {
  @override  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: new Text('App Name'),
          actions: <Widget>[
            InkWell(
              child: Icon(Icons.search),
              onTap: () {
                print("click search");
              },
            ),            
           SizedBox(width: 20),            
             InkWell(
              child: Icon(Icons.more_vert),
              onTap: () {
                print("click more");
              },
            ),            
        SizedBox(width: 30)          ],
        leading: InkWell(
          child: Icon(Icons.menu),
          onTap: (){
            print("click menu");
          },
        ),
      ),
    );
  }
}


.........................................................................................................................................................................................................................
Example :#6 [ Default Tab Controller]
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: MyApp(),
    ));
class MyApp extends StatefulWidget {
  MyApp({Key key, this.title}) : super(key: key);
  final String title;
  MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
  @override  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Cart Applications!'),
          centerTitle: true,          
        bottom: TabBar(            
            tabs: <Widget>[
              Tab(text:'Product'),
              Tab(text: 'Checkout',),
            ],
          ),
        ),
      ),
    );
  }
}




.........................................................................................................................................................................................................................
Example :#7 [Form Desing]

import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
      home: MyApp(),
    ));

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form Validation'),
        centerTitle: true,
      ),
      body: Container(
        padding: EdgeInsets.all(30.0),
        child: Column(
          children: <Widget>[
              ProductName(),
              ProductPrice(),
              SaveButton(),
          ],
        ),
      ),
    );
  }
}

Widget ProductName() {
  return TextField(
    decoration: InputDecoration(
      labelText: 'Enter username',
    ),
  );
}

Widget ProductPrice() {
  return TextField(
    decoration: InputDecoration(
      labelText: 'Enter price'),
  );
}

Widget SaveButton() {
  return RaisedButton(
    child: Text('Save Products'),
    onPressed: () {}
    ,
  );
}







.........................................................................................................................................................................................................................
Example :#8 [Buttons with Icons]
import 'package:flutter/material.dart';

void main()=>runApp(MaterialApp(home: MyApp(),));
class MyApp extends StatefulWidget{
  @override  MyAppState createState()=>MyAppState();
}
class MyAppState extends State<MyApp>{
  @override  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('Image'),
      ),
      body: Center(
        child: RaisedButton.icon(
            onPressed: (){},
            icon: Icon(Icons.mail),
            label: Text('mail Box'),
            color: Colors.amber,
        ),
        ),
    );
  }
}







.........................................................................................................................................................................................................................
Example :#9 [Expanded Widget ]

import 'package:flutter/material.dart';
void main()=>runApp(MaterialApp(home: MyApp(),));
class MyApp extends StatefulWidget{
  @override  MyAppState createState()=>MyAppState();
}
class MyAppState extends State<MyApp>{
  @override  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('Image'),
      ),
      body: Row(
        children: <Widget>[
          Expanded(
            flex: 3,
            child: Container(
              padding: EdgeInsets.all(30.0),
              color: Colors.amber,
              child: Text('1'),
            ),
          ),

          Expanded(
            flex: 2,
            child: Container(
              padding: EdgeInsets.all(30.0),
              color: Colors.green,
              child: Text('2'),
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              padding: EdgeInsets.all(30.0),
              color: Colors.red,
              child: Text('3'),
            ),
          ),
        ],
      ),
    );
  }
}

.........................................................................................................................................................................................................................
Example :#10 [Expanded Widget ]
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main()=>runApp(MaterialApp(home: MyApp(),));
class MyApp extends StatefulWidget{
  @override  MyAppState createState()=>MyAppState();
}
class MyAppState extends State<MyApp>{
  @override  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('Image'),
      ),
      body: Row(
        children: <Widget>[
          Expanded(
            flex: 3,
            child: Image.asset('assets/images/onboarding1.png'),
          ),
          Expanded(

            flex: 3,
            child: Container(
              padding: EdgeInsets.all(30.0),
              color: Colors.amber,
              child: Text('1'),
            ),
          ),

          Expanded(
            flex: 2,
            child: Container(
              padding: EdgeInsets.all(30.0),
              color: Colors.green,
              child: Text('2'),
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              padding: EdgeInsets.all(30.0),
              color: Colors.red,
              child: Text('3'),
            ),
          ),
        ],
      ),
    );
  }
}











.........................................................................................................................................................................................................................
Example :#11 [List ]

import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
      home: MyApp(),
    ));

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);
  @override
  MyAppState createState() => MyAppState();
}
class MyAppState extends  State<MyApp>{
  List<String> mylist=[
    'ddd....',
    'dddddddd',
    'dddddddd',
    'dddddddd',
    'dddddddd',
  ];
  @override 
  Widget build(BuildContext context ){
    return Scaffold(
      appBar: AppBar(  
        title: Text('App Bar '),
      ),
      body: Container(
        child: Column(
          children: mylist.map((e) => Text(e)).toList()
        ),
      ),
    );
  }
}
.........................................................................................................................................................................................................................
Example :#12 [ List ]
class Quotes {
  String title;
  String author;
  Quotes({this.title, this.author});
}


import 'package:flutter/material.dart';
import 'package:helloworld/list.dart';

void main() => runApp(MaterialApp(
      home: MyApp(),
    ));

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);
  @override
  MyAppState createState() => MyAppState();
}
class MyAppState extends  State<MyApp>{
  List<Quotes> mylist= [
    Quotes(title:'Hello', author:'Peetor'),
    Quotes(title:'Hello', author:'Hary'),
  ];

  @override 
  Widget build(BuildContext context ){
    return Scaffold(
      appBar: AppBar(  
        title: Text('App Bar'),
      ),
      body: Container(
        child: Column(
         children: mylist.map((e) =>Text('${e.title}'  '${e.author}')).toList(),
        ),
      ),
    );
  }
}
.........................................................................................................................................................................................................................
Example :#13 [Card]
  class Quotes {
  String title;
  String author;
  Quotes({this.title, this.author});
}




import 'package:flutter/material.dart';
import 'package:helloworld/list.dart';
void main() => runApp(MaterialApp(
      home: MyApp(),
    ));

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);
  @override
  MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
  List<Quotes> e = [
    Quotes(title: 'Hello...........................Hello...........................', author: 'Peetor.....'),
    Quotes(title: 'Hello.....Hello..............................................', author: 'Hary..........'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App Bar'),
      ),
      body: Container(
        child: Column(
          children:
              e.map((e) => quoteCard(e)).toList(),
        ),
      ),
    );
  }
}
Widget quoteCard(e) {
  return Card(
    margin: EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 0),
    child: Padding(
      padding: const EdgeInsets.all(12.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Text(
          e.title,
          style: TextStyle(fontSize: 20.0, color: Colors.grey[800]),
        ),
        SizedBox(
          height: 20.0,
        ),
        Text(
          e.author,
          style: TextStyle(fontSize: 20.0, color: Colors.grey[800]),
        ),
         SizedBox(
          height: 20.0,
        ),
      ],
    ),
   ),
  );
}

.........................................................................................................................................................................................................................
Example :#14 [Loading]

flutter_spinkit 4.1.2+1




.........................................................................................................................................................................................................................
Example :#15 [AppBar ]
import 'package:flutter/material.dart';
void main()=>runApp(MaterialApp(home: MyApp(),));

class MyApp extends StatefulWidget{
  @override  MyAppState createState()=>MyAppState();
}
class MyAppState extends State<MyApp>{
  @override  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange[400],
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.vertical(
          bottom: Radius.circular(30),
        )),
      ),
    );
  }
}


.........................................................................................................................................................................................................................
Example :#16 [Shopping header Desing]
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: MyApp(),
    ));

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(top: 15.0),
                child: IconButton(icon: Icon(Icons.arrow_back)),
              ),
              Padding(
                padding: EdgeInsets.only(top: 15.0, right: 15.0),
                child: Stack(
                  children: <Widget>[
                    Container(
                      width: 50,
                      height: 50,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20)),
                    ),
                    Container(
                      width: 40,
                      height: 40,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20),
                          color: Colors.green[900]),
                      child: Icon(
                        Icons.shopping_basket,
                        size: 20.0,
                        color: Colors.white,
                      ),
                    ),
                    Positioned(
                      top: 25.0,
                      right: 30.0,
                      child: Container(
                        width: 20,
                        height: 20,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20),
                            color: Colors.red[900]),
                        child: Center(
                          child: Text(
                            '8',
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}


.........................................................................................................................................................................................................................
Example :# 17
import 'package:flutter/material.dart';
void main()=>runApp(MaterialApp(home: MyApp(),));

class MyApp extends StatefulWidget{
  @override
  MyAppState createState()=>MyAppState();
}
class MyAppState extends State<MyApp>{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      body:Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          TextSection(Colors.yellowAccent),
          TextSection(Colors.green),
          TextSection(Colors.deepPurpleAccent),
        ],
      ) ,
    );
  }
}
class TextSection extends StatelessWidget{
  Color _colors;
  TextSection(this._colors);
  @override
  Widget build(BuildContext context){
    return Container(
      decoration: BoxDecoration(color: _colors),
      child: Text('Hello World', style: TextStyle(fontSize: 20.0),),

    );
  }
}
.........................................................................................................................................................................................................................
Example :#18
import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SignInPage(),
    );
  }
}

class SignInPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Time Picker'),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      body: contextBuilder(),
    );
  }
}

class contextBuilder extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(20.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Text(
            'Sign In',
            style: TextStyle(fontSize: 28.0, fontWeight: FontWeight.bold),
            textAlign: TextAlign.center,
          ),
          RaisedButton(
            onPressed: () {},
            child: Text(
              'Sign in with Google',
              style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 18.0,
                  color: Colors.black),
            ),
            color: Colors.white,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(8.0))),
          ),
          SizedBox(
            height: 8.0,
          ),
          SignInButton(
            onPressed: () {},
            borderRadius: 4.0,
            color: Colors.white,
            child: Text(
              'Sign in with Facebook',
              style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 18.0,
                  color: Colors.black),
            ),
          ),
          SizedBox(height: 4.0),
          RaisedAbstract(
            text: 'Sign in with Twitter',
            textColor: Colors.black,
            color: Colors.teal[700],
            onPressed: () {},
          ),
        ],
      ),
    );
  }
}

class RaisedAbstract extends SignInButton {
  RaisedAbstract({
    Color color,
    String text,
    Color textColor,
    double borderRadius,
    VoidCallback onPressed,
  }) : super(
          child: Text(
            text,
            style: TextStyle(
                color: textColor, fontSize: 18.0, fontWeight: FontWeight.bold),
          ),
          color: color,
          borderRadius: 8.0,
          onPressed: onPressed,
          height: 8.0,
        );
}

class SignInButton extends StatelessWidget {
  SignInButton({
    this.child,
    this.color,
    this.borderRadius,
    this.onPressed,
    this.height: 50,
  });
  final Widget child;
  final Color color;
  final double borderRadius;
  final double height;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 50.0,
      child: RaisedButton(
        child: child,
        color: color,
        onPressed: onPressed,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(borderRadius))),
      ),
    );
  }
}
.........................................................................................................................................................................................................................
Example :#19
import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: FirstScreen(),
    );
  }
}
class FirstScreen extends StatefulWidget{
  @override
  FirstScreenState createState()=>FirstScreenState();
}
class FirstScreenState extends State<FirstScreen>{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: ListView(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.all(15.0),
            child: Row(
              children: <Widget>[
                Icon(Icons.menu, color: Colors.black),
                Padding(
                  padding: EdgeInsets.all(15.0),
                  child: Container(
                    height: 50,
                    width: 50,
                    decoration: BoxDecoration(
                      boxShadow: [
                        BoxShadow( color: Colors.grey.withOpacity(1.0),
                            blurRadius: 4.0,
                            spreadRadius: 5.0,
                            offset: Offset(0.2, 0.3),)
                      ],
                      shape: BoxShape.circle,
                      image: DecorationImage(
                        image: AssetImage('assets/images/l.jpg'),
                      )
                        
                    ),
                  ),
                )
              ],
            ),
          )
        ],
      ),

    );
  }
}
.........................................................................................................................................................................................................................
Example :#20
import 'package:flutter/material.dart';
import 'package:shoppingproject/screens/homeScreens.dart';
void main()=>runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title:'Flutter App',
      debugShowCheckedModeBanner: false,
      home:HomeScreen() ,
      theme: ThemeData(
        primaryColor: Colors.red,
        accentColor: Color(0xFFFE9ED),
      ),
    );
  }
}

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget{
  @override
  HomeScreenState createState()=>HomeScreenState();
}
class HomeScreenState extends State<HomeScreen>{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      backgroundColor: Theme.of(context).primaryColor,
        appBar: AppBar(
          title: Text('Chat', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
          centerTitle: true,
          leading: IconButton(
            onPressed: (){},
            icon: Icon(Icons.menu),
            iconSize: 30.0,
            color: Colors.white,
          ),
          actions: <Widget>[
            InkWell(
              child: IconButton(
                onPressed: (){},
                icon: Icon(Icons.more_horiz),
                iconSize: 25,
                color: Colors.white,
              ),
            ),
          ],
        ),
      body: Column(
        children: <Widget>[
          CategorySelector(),
          Expanded(
            child: Container(
              decoration:BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(30.0),
                  topLeft: Radius.circular(30.0),
                )
              ),
            ),
          )
        ],
      ),
    );
  }
}

class CategorySelector extends StatefulWidget{
  @override
  CategorySelectorState createState()=>CategorySelectorState();
}
class CategorySelectorState extends State<CategorySelector>{
  int selectIndex =0;
  final List<String> category =['Message', 'Online', 'Groups','Chats', 'Request'];
  @override
  Widget build(BuildContext context){
    return Container(
      height: 90.0,
      color: Theme.of(context).primaryColor,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
          itemCount: category.length,
          itemBuilder: (context, int index){
            return GestureDetector(
              onTap: (){
                setState(() {
                  selectIndex=index;
                });
              },
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 30.0),
                child: Text(category[index],
                  style: TextStyle(color: index == selectIndex ?Colors.white: Colors.white60, fontWeight: FontWeight.bold, fontSize: 20.0, letterSpacing: 1.2),),
              ),
            );
          }),
    );
  }
}
.........................................................................................................................................................................................................................
Example :#21

.........................................................................................................................................................................................................................
Example :#22 [Custom Widget]
import 'package:flutter/material.dart';
void main()=> runApp(MaterialApp(home: CustomWidgetDemo()));

class CustomWidgetDemo extends StatefulWidget{
  CustomWidgetDemo({Key key}):super(key:key);
 final String title="Custom Widgets";
  @override
  _CustomWidgetDemoState createState()=>_CustomWidgetDemoState();
}

class _CustomWidgetDemoState extends State<CustomWidgetDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text("here is a custom button in FLutter"),
            CustomButton(
              onPressed: () {
                print("Tapped Me");
              },
            )
          ],
        ),
      ),
    );
  }
}
class CustomButton extends StatelessWidget {
  CustomButton({@required this.onPressed});
  final GestureTapCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      fillColor: Colors.green,
      splashColor: Colors.greenAccent,
      onPressed: onPressed,
      shape: StadiumBorder(),
      child: Padding(
        padding: EdgeInsets.all(10.0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: const <Widget>[
            Icon(
              Icons.face,
              color: Colors.amber,
            ),
            SizedBox(
              width: 10.0,
            ),
            Text(
              "Tap Me",
              maxLines: 1,
              style: TextStyle(color: Colors.white),
            ),
          ],
        ),
      ),

    );
  }

}
.........................................................................................................................................................................................................................
Example :#23
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: MyApp()));
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
            child: Container(
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
          SizedBox(
            height: 50,
          ),
          /// Search Bar
          Container(
            margin: EdgeInsets.symmetric(horizontal: 12),
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8),
              boxShadow: <BoxShadow>[
                BoxShadow(
                  offset: Offset(5.0, 5.0),
                  blurRadius: 5.0,
                  color: Colors.black87.withOpacity(0.05),
                ),
              ],
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(left: 9),
                  child: Text(
                    "Search",
                    style: TextStyle(color: Color(0xff9B9B9B), fontSize: 17),
                  ),
                ),
                Spacer(),
                Icon(Icons.search),
              ],
            ),
          ),
        ]))));
  }
}




.........................................................................................................................................................................................................................
Example :#24
import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Shopping(),
    );
  }
}

class Shopping extends StatefulWidget{
  @override
  ShoppingState createState()=>ShoppingState();
}
class ShoppingState extends State<Shopping>{
  @override
Widget build(BuildContext context){
    return Scaffold(
      backgroundColor: Color(0xff4E2958),
      body: SingleChildScrollView(
        child: SafeArea(
          child: Column(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    IconButton(color: Colors.white,onPressed: (){},icon: Icon(Icons.arrow_back_ios),),
                    IconButton(color: Colors.white,onPressed: (){},icon: Icon(Icons.search),)

                  ],
                ),
              ),
              SizedBox(height: 30),
              Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.vertical(top: Radius.circular(30)),
                ),
              ),


            ],
          ),
        ),
      ),
    );
  }
}
.........................................................................................................................................................................................................................
Example :#25

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: Home()));

class Home extends StatefulWidget {
  @override
  HomeState createState() => HomeState();
}

class HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: Colors.transparent,
        iconTheme: IconThemeData(color: Colors.black),
        leading: IconButton(
          onPressed: () {},
          icon: Icon(Icons.format_quote,size: 50,),
        ),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Text(
                  'Anyone who has never made a mistake has never tried anything new.',
                  style: Theme.of(context)
                      .textTheme
                      .headline3
                      .copyWith(color: Colors.grey.shade800)),
              SizedBox(
                height: 12.0,
              ),
              Text('Albert Einstein',
                  style: Theme.of(context)
                      .textTheme
                      .subtitle1
                      .copyWith(color: Colors.grey.shade600, fontSize: 20.0))
            ]),
      ),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          children: [
            const SizedBox(width: 20,),
            Expanded(
                child: GestureDetector(
              onTap: () {},
              child: Text('tap for more', textAlign: TextAlign.center,),
            )),
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.bookmark_border),
            ),
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.share),
            )
          ],
        ),
      ),
    );
  }
}


.......................................................................................................................................................................................................................................
Example :#26 [ Exploring Packages shape_of_view 1.0.2]

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:shape_of_view/shape_of_view.dart';

void main() async {
  SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle());
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}


class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFEDF3F8),
      body: ListView(
        children: [
          ShapeOfView(
            shape: ArcShape(height: 60, position: ArcPosition.Bottom),
            child: Image.asset(
              'assets/images/beach.jpg',
              height: 150,
              fit: BoxFit.cover,
            ),
          ),
          SizedBox(
            height: 40,
          ),
          Center(
            child: Text("Hotel ",
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 35,
                    color: Color(0xFFF22547E))),
          ),
          SizedBox(height: 60),
          Padding(
            padding: EdgeInsets.only(right: 40, left: 40),
            child: RoundedButton(
              hinText: 'Email',
              prefixIcon: Icon(Icons.email),
            ),
          ),
          SizedBox(height: 30),
          Padding(
            padding: EdgeInsets.only(right: 40, left: 40),
            child: RoundedButton(
              hinText: 'password',
              prefixIcon: Icon(Icons.lock),
            ),
          ),
          SizedBox(height: 30),
          FlatButton(
            onPressed: () {},
            child: Container(
              padding: EdgeInsets.fromLTRB(60.0, 16.0, 60.0, 16.0),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                    colors: [Colors.blue[900], Colors.blue[200]]),
                borderRadius: BorderRadius.circular(50.0),
              ),
              child: Text(
                'Sign In',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 24),
              ),
            ),
          ),
          SizedBox(height: 30),
          FlatButton(
            onPressed: () {},
            child: Container(
                padding: EdgeInsets.fromLTRB(60.0, 16.0, 60.0, 16.0),
                child: Text("Don't you have an account ? Sign up",
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                        color: Color(0xFF54B0F3)))),
          ),
        ],
      ),
    );
  }
}

class RoundedButton extends StatelessWidget {
  final String hinText;
  final  prefixIcon;
  RoundedButton({Key key, @required this.hinText,  this.prefixIcon}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(50),
      ),
      child: TextField(
        decoration: InputDecoration(
            contentPadding: const EdgeInsets.all(12.0),
            hintText: hinText,
            prefixIcon: prefixIcon,
            hintStyle: TextStyle(color: Color(0xFF54B0F3)),
            border: InputBorder.none),
      ),
    );
  }
}

Happy Coding :)
.........................................................................................................................................................................................................................
Example :#27 [Basic Steps ]
colors
image

.........................................
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hello'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          TextSctions(Colors.red),
          TextSctions(Colors.black),
          TextSctions(Colors.blueAccent),
        ],
      ),
    );
  }
}

class TextSctions extends StatelessWidget {
  TextSctions(this._color);
  final Color _color;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: _color,
        ),
      child: Text('Hi'),
    );
  }
}
........................................................
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('hello'),
      ),
      body: Column(
        children: [
          ImageBaner('assets/images/d.jpg'),
          TextSection(Colors.red),
          TextSection(Colors.green),
        ],
      ),
    );
  }
}

class ImageBaner extends StatelessWidget {
  ImageBaner(this.assetsPath);
  final  assetsPath;
  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: BoxConstraints.expand(
        height: 200,
      ),
      decoration: BoxDecoration(color: Colors.white),
      child: Image.asset(assetsPath, fit: BoxFit.cover),
    );
  }
}

class TextSection extends StatelessWidget {
  final Color _color;
  TextSection(this._color);
  @override
  Widget build(BuildContext context) {
    return Container(
      color: _color,
      child: Text('Hello'),
      constraints: BoxConstraints.expand(
        height: 100,
      ),
    );
  }
}




.........................................................................................................................................................................................................................
Example :#28
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
import 'package:price_comparing_app/custombuttons/signinbutton.dart';
import 'package:price_comparing_app/signin.dart';

class SignUp extends StatefulWidget {
  static const String SignUpScreenRoute = 'SignUpScreen';

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

class _SignUpState extends State<SignUp> {
  //we use this variable with state to show and hide circular indicator
  bool visible = false;
  final nameController = TextEditingController();
  final emailController = TextEditingController();
  final passwordController = TextEditingController();
  final confirmpasswordController = TextEditingController();
  Future userRegistration() async {
    //Showing circular indicator
    setState(() {
      visible = true;
    });

    // SERVER API URL
    var url =
        'http://weanio.com/portfolio/price_comparing/public/api/auth/signup';
    //for data storing

    var data = {
      'name': nameController.text,
      'email': emailController.text,
      'password': passwordController.text,
      'confirmpassword': ""
    };
    var response = await http.post(url, body: json.encode(data));
    // var response = await http.post(url, body: data);

    // Getting server response into variable
    var message = jsonDecode(response.body);
    Navigator.push(context,
        MaterialPageRoute(builder: (BuildContext context) => SignIn()));

    // print(nameController.text);
    // print(confirmpasswordController.text);
    // If web  call success than hide the CirculrProgressIndicator
    if (response.statusCode == 200) {
      setState(() {
        visible = false;
      });

      showDialog(
          context: context,
          builder: (BuildContext context) {
            return AlertDialog(
              title: Text(message),
              actions: [
                FlatButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text('OK')),
              ],
            );
          });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          padding: EdgeInsets.only(
              top: MediaQuery.of(context).size.height * .03,
              bottom: MediaQuery.of(context).size.height * .02),
          decoration: BoxDecoration(
              image: DecorationImage(
                  fit: BoxFit.cover,
                  image: AssetImage(
                    'images/bg.png',
                  ))),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 0),
                child: Image.asset(
                  'images/spara.png',
                  height: 60,
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(left: 20, right: 20),
                child: Card(
                  elevation: 30,
                  color: Colors.white,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10)),
                  child: Container(
                    decoration:
                        BoxDecoration(borderRadius: BorderRadius.circular(10)),
                    width: 390,
                    height: 500,
                    child: Padding(
                      padding: const EdgeInsets.all(15),
                      child: Column(
                        children: [
                          Text(
                            'Create Account',
                            style: TextStyle(
                              color: Colors.black,
                              fontSize: 20,
                            ),
                          ),
                          SizedBox(
                            height: 15,
                          ),
                          TextField(
                            controller: nameController,
                            decoration: InputDecoration(
                                labelText: 'User Name',
                                suffixIcon: Icon(Icons.person),
                                hintText: 'Enter Your Name'),
                          ),
                          SizedBox(
                            height: 10,
                          ),
                          TextField(
                            controller: emailController,
                            decoration: InputDecoration(
                                labelText: 'Email',
                                suffixIcon: Icon(Icons.person),
                                hintText: 'Enter your Email'),
                          ),
                          SizedBox(
                            height: 15,
                          ),
                          TextField(
                            controller: passwordController,
                            decoration: InputDecoration(
                                labelText: 'Password',
                                suffixIcon: Icon(Icons.visibility),
                                hintText: 'Enter Your password'),
                            autofocus: false,
                            obscureText: true,
                          ),
                          TextField(
                            controller: confirmpasswordController,
                            decoration: InputDecoration(
                                labelText: 'Confirm Password',
                                suffixIcon: Icon(Icons.visibility),
                                hintText: 'Enter Your Confirm Password'),
                            autofocus: false,
                            obscureText: true,
                          ),
                          SizedBox(
                            height: 10,
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Checkbox(
                                  checkColor: Colors.green,
                                  activeColor: Colors.grey,
                                  value: true,
                                  onChanged: (value) {}),
                              Text(
                                'I read and agreeto ',
                                style: TextStyle(color: Colors.grey),
                              ),
                              Text(
                                'Terms&Conditions',
                                style: TextStyle(
                                  decoration: TextDecoration.underline,
                                  color: Colors.red,
                                ),
                              )
                            ],
                          ),
                          SizedBox(
                            height: 0,
                          ),
                          SignInButton(
                            text: 'SIGNUP',
                            textColor: Colors.white,
                            color: Colors.lime[300],
                            onPressed: () {
                              userRegistration();
                            },
                          ),
                          Visibility(
                            visible: visible,
                            child: Container(
                              margin: EdgeInsets.only(bottom: 30),
                              child: CircularProgressIndicator(),
                            ),
                          ),
                          SizedBox(
                            height: 2,
                          ),
                          Text('or Login using social media'),
                          SizedBox(
                            height: 15,
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Image.asset(
                                'images/facebook.png',
                                height: 28,
                                width: 23,
                              ),
                              SizedBox(
                                width: 35,
                              ),
                              Image.asset(
                                'images/instagram.png',
                                height: 30,
                                width: 30,
                              ),
                              SizedBox(
                                width: 35,
                              ),
                              Image.asset(
                                'images/twitter.png',
                                height: 30,
                                width: 30,
                              ),
                            ],
                          )
                        ],
                      ),
                    ),
                  ),
                ),
              ),
              SizedBox(
                height: 0,
              ),
              RichText(
                text: TextSpan(
                  children: <TextSpan>[
                    TextSpan(
                        text: 'Have an account',
                        style: TextStyle(color: Colors.black, fontSize: 15)),
                    TextSpan(
                        text: ' SIGN IN here ',
                        style: TextStyle(color: Colors.red, fontSize: 15)),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
.........................................................................................................................................................................................................................
Example :#29
.........................................................................................................................................................................................................................
Example :#30
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)