Flutter UI : Account detail with social login
Flutter UI : Account detail with social login

#Source code

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

 
class LoginAttemptVerifyPage extends StatefulWidget {

  LoginAttemptVerifyPage({Key? key}) : super(key: key);

  @override

  _LoginAttemptVerifyPageState createState() => _LoginAttemptVerifyPageState();

}

 

class _LoginAttemptVerifyPageState extends State<LoginAttemptVerifyPage> {

  GlobalKey<ScaffoldState> scaffoldState = GlobalKey<ScaffoldState>();


  List verifyArray = [];

  void initState() {

    super.initState();

    // verifyArray = widget.verifyDetail!.split(',');

    setState(() {});

  }

 
  Widget ticketTile(context) {

    return ListTile(

      leading: CircleAvatar(),

      title: Container(

        child: Row(

          mainAxisAlignment: MainAxisAlignment.spaceBetween,

          children: [

            SizedBox(

              width: 150,

              child: Text(

                "xx@gmail.com",

                style: TextStyle(

                  color: Colors.black54,

                ),

                maxLines: 2,

              ),

            ),

            // SizedBox(width: 50),

            // Container(

            //   child: Flexible(

 

            Text(

              "Account",

              style: TextStyle(

                color: Colors.black54,

                fontSize: 13,

              ),

              // style: Theme.of(context).textTheme.caption!.apply(

              //         color: Colors.black54,fontStyle: FontStyle.normal),

              maxLines: 2,

            ),

 

            //   ),

            // ),

          ],

        ),

      ),

      subtitle: Row(

        mainAxisAlignment: MainAxisAlignment.spaceBetween,

        children: [

          SizedBox(

            width: 120,

            child: Padding(

              padding: EdgeInsets.fromLTRB(0, 5, 0, 5),

              child: Text(

                "xxxx@gmail.com",

                style: Theme.of(context).textTheme.bodyText2!.apply(

                      color: Colors.black45,

                    ),

                maxLines: 2,

              ),

            ),

          ),

          Text(

            "xxxxx",

            style: Theme.of(context).textTheme.bodyText2!.apply(

                  color: Colors.blueAccent,

                ),

          ),

        ],

      ),

      isThreeLine: true,

    );

  }

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

 

        // body: verifyDetail == null

        //     ? Center(child: WaitPage(title: 'Loading info...'))

        //     : Container(

        body: Container(

      color: Colors.white,

      child: ListView(

        children: <Widget>[

          SafeArea(

              child: Padding(

                  padding: EdgeInsets.only(left: 16, right: 16, top: 10),

                  child: Row(

                    mainAxisAlignment: MainAxisAlignment.spaceBetween,

                    children: <Widget>[

                      Text(

                        " Account Details",

                        style: TextStyle(fontSize: 20, color: Colors.blueGrey),

                      ),

                      Container(

                        padding: EdgeInsets.only(

                            left: 8, right: 8, top: 0, bottom: 2),

                        decoration: BoxDecoration(

                          borderRadius: BorderRadius.circular(30),

                          color: Colors.pink[50],

                        ),

                        child: Row(

                          children: <Widget>[

                            IconButton(

                              icon: Icon(Icons.settings),

                              onPressed: () => {},

                            ),

                          ],

                        ),

                      )

                    ],

                  ))),

          Divider(

            color: Colors.blueGrey,

          ),

          SizedBox(height: 20),

          Column(

            children: <Widget>[

              Container(

                child: Column(

                  children: <Widget>[

                    ticketTile(context),

                    SizedBox(

                      height: 10,

                    ),

                    Row(

                      mainAxisAlignment: MainAxisAlignment.spaceBetween,

                      children: [

                        Center(

                          child: Padding(

                            padding: const EdgeInsets.only(left: 10.0),

                            child: Container(

                              child: Padding(

                                padding: const EdgeInsets.only(left: 8.0),

                                child: Wrap(

                                  spacing: 8.0, // gap between adjacent chips

                                  runSpacing: 4.0, // gap between lines

                                  children: <Widget>[

                                    ActionChip(

                                      elevation: 8.0,

                                      padding: EdgeInsets.all(2.0),

                                      avatar: CircleAvatar(

                                        backgroundColor: Colors.red[300],

                                        child: Icon(

                                          Icons.notifications,

                                          color: Colors.white,

                                          size: 20,

                                        ),

                                      ),

                                      label: Text(" Alert"),

                                      onPressed: () {},

                                      backgroundColor: Colors.red[400],

                                      shape: StadiumBorder(

                                          side: BorderSide(

                                        width: 1,

                                        color: Colors.red,

                                      )),

                                    ),

                                    ActionChip(

                                      elevation: 8.0,

                                      padding: EdgeInsets.all(2.0),

                                      avatar: CircleAvatar(

                                        backgroundColor: Colors.grey[300],

                                        child: Icon(

                                          Icons.lock_open,

                                          color: Colors.green,

                                          size: 20,

                                        ),

                                      ),

                                      label: Text('',

                                          style:

                                              TextStyle(color: Colors.black)),

                                      onPressed: () {},

                                      backgroundColor: Colors.green[300],

                                      shape: StadiumBorder(

                                          side: BorderSide(

                                        width: 1,

                                        color: Colors.grey,

                                      )),

                                    ),

                                    ActionChip(

                                      elevation: 8.0,

                                      padding: EdgeInsets.all(2.0),

                                      avatar: CircleAvatar(

                                        backgroundColor: Colors.grey[300],

                                        child: Icon(

                                          Icons.credit_card_rounded,

                                          color: Colors.green,

                                          size: 20,

                                        ),

                                      ),

                                      label: Text('Cards',

                                          style:

                                              TextStyle(color: Colors.black54)),

                                      onPressed: () {

                                        Navigator.push(

                                            context,

                                            MaterialPageRoute(

                                                builder: (_) =>

                                                    CreditCardsPage()));

                                      },

                                      backgroundColor: Colors.green[300],

                                      shape: StadiumBorder(

                                          side: BorderSide(

                                        width: 1,

                                        color: Colors.grey,

                                      )),

                                    ),

                                    ActionChip(

                                      elevation: 8.0,

                                      padding: EdgeInsets.all(2.0),

                                      avatar: CircleAvatar(

                                        backgroundColor: Colors.grey[300],

                                        child: Icon(

                                          Icons.money_rounded,

                                          color: Colors.red[300],

                                          size: 20,

                                        ),

                                      ),

                                      label: Text('Banks',

                                          style:

                                              TextStyle(color: Colors.black54)),

                                      onPressed: () {

                                        Navigator.push(

                                            context,

                                            MaterialPageRoute(

                                                builder: (_) =>

                                                    CreditCardsPage()));

                                      },

                                      backgroundColor: Colors.green[300],

                                      shape: StadiumBorder(

                                          side: BorderSide(

                                        width: 1,

                                        color: Colors.grey,

                                      )),

                                    ),

                                  ],

                                ),

                              ),

                            ),

                          ),

                        ),

                        Padding(

                            padding: EdgeInsets.only(top: 0),

                            child: Container()),

                        SizedBox(

                          height: 20,

                        ),

                      ],

 

                      //),

                    ),

                    SizedBox(

                      height: 20,

                    ),

                    //   Padding(

                    //     padding:

                    //         const EdgeInsets.fromLTRB(0.0, 8.0, 8.0, 8.0),

                    //     child: Row(

                    //         mainAxisAlignment: MainAxisAlignment.spaceEvenly,

                    //         children: <Widget>[

                    //           IconButton(

                    //               onPressed: () => {},

                    //               icon: Icon(

                    //                 Icons.email,

                    //                 size: 30,

                    //                 color: Colors.blue[300],

                    //               )),

                    //           Expanded(

                    //             // optional flex property if flex is 1 because the default flex is 1

                    //             flex: 1,

                    //             // Padding(

                    //             //   padding: const EdgeInsets.only(

                    //             //       left: 8.0, right: 8.0, top: 10, bottom: 0),

                    //             child: TextFormField(

                    //               // controller: reqstEmailCtrl,

                    //               decoration: InputDecoration(

                    //                 focusedBorder: UnderlineInputBorder(

                    //                   borderSide: BorderSide(

                    //                       color: Colors.green, width: 1.0),

                    //                 ),

                    //                 enabledBorder: UnderlineInputBorder(

                    //                   borderSide: BorderSide(

                    //                       color: Colors.blue, width: 1.0),

                    //                 ),

                    //                 labelText: 'Email ',

                    //               ),

 

                    //               // validator: MultiValidator([

                    //               //   RequiredValidator(

                    //               //       errorText: "Enter subject"),

                    //               // ]),

                    //               // //validatePassword,

                    //               // onSaved: (newValue) => _ticketobj

                    //               //         .subject =

                    //               //     newValue!, //Function to check validation

                    //             ),

                    //           ),

                    //         ]),

                    //   ),

                  ],

                ),

              ),

 

              // SizedBox(

              //   height: 20,

              // ),

              // Center(

              //   child: ElevatedButton.icon(

              //     onPressed: () {},

              //     icon: Icon(Icons.verified),

              //     label: Text('Verify'),

              //   ),

              // ),

              SizedBox(

                height: 20,

              ),

              Text(

                " Social Accounts ",

                style: TextStyle(

                    fontWeight: FontWeight.bold, color: Colors.black45),

              ),

              SizedBox(

                height: 20,

              ),

              // Divider(),

              ListView.builder(

                  itemCount: 1,

                  physics: ClampingScrollPhysics(),

                  scrollDirection: Axis.vertical,

                  shrinkWrap: true,

                  itemBuilder: (context, index) {

                    return Container(

                      color: (index % 2 == 0) ? Colors.white : Colors.grey[200],

                      child: Column(

                        children: [

                          Row(

                            // crossAxisAlignment: CrossAxisAlignment.center,

                            mainAxisAlignment: MainAxisAlignment.spaceAround,

                            children: [

                              Padding(

                                padding: const EdgeInsets.all(8.0),

                                child: SignInButton(

                                    imagePosition:

                                        ImagePosition.left, // left or right

                                    buttonType: ButtonType.google,

                                    onPressed: () {

                                      print('click');

                                    }),

                              ),

                              Icon(

                                Icons.verified,

                                color: Colors.green[600],

                              ),

                            ],

                          ),

                          Row(

                            // crossAxisAlignment: CrossAxisAlignment.center,

                            mainAxisAlignment: MainAxisAlignment.spaceAround,

                            children: [

                              Padding(

                                padding: const EdgeInsets.all(8.0),

                                child: SignInButton(

                                    imagePosition:

                                        ImagePosition.left, // left or right

                                    buttonType: ButtonType.linkedin,

                                    onPressed: () {

                                      print('click');

                                    }),

                              ),

                              Icon(

                                Icons.verified,

                                color: Colors.green[600],

                              ),

                            ],

                          ),

                          Row(

                            // crossAxisAlignment: CrossAxisAlignment.center,

                            mainAxisAlignment: MainAxisAlignment.spaceAround,

                            children: [

                              Padding(

                                padding: const EdgeInsets.all(8.0),

                                child: SignInButton(

                                    imagePosition:

                                        ImagePosition.left, // left or right

                                    buttonType: ButtonType.facebook,

                                    onPressed: () {

                                      print('click');

                                    }),

                              ),

                              Icon(

                                Icons.verified,

                                color: Colors.black45,

                              ),

                            ],

                          ),

                          Row(

                            // crossAxisAlignment: CrossAxisAlignment.center,

                            mainAxisAlignment: MainAxisAlignment.spaceAround,

                            children: [

                              Padding(

                                padding: const EdgeInsets.all(8.0),

                                child: SignInButton(

                                    imagePosition:

                                        ImagePosition.left, // left or right

                                    buttonType: ButtonType.apple,

                                    onPressed: () {

                                      print('click');

                                    }),

                              ),

                              Icon(

                                Icons.verified,

                                color: Colors.black45,

                              ),

                            ],

                          ),

                          Row(

                            // crossAxisAlignment: CrossAxisAlignment.center,

                            mainAxisAlignment: MainAxisAlignment.spaceAround,

                            children: [

                              Padding(

                                padding: const EdgeInsets.all(8.0),

                                child: SignInButton(

                                    imagePosition:

                                        ImagePosition.left, // left or right

                                    buttonType: ButtonType.instagram,

                                    onPressed: () {

                                      print('click');

                                    }),

                              ),

                              Icon(

                                Icons.verified,

                                color: Colors.black45,

                              ),

                            ],

                          ),

                        ],

                      ),

                    );

                  })

            ],

          ),

        ],

      ),

    ));

  }

}

 

class VerifyModel {

  String? confirm;

  String? userName;

  String? details;

  String? code;

}

 

Leave a Reply

Your email address will not be published. Required fields are marked *