Saturday, December 8, 2018

FLUTTER - UI CLONE OF DREAM11 TEAM PAGE:-




       FLUTTER - UI CLONE OF DREAM11 TEAM PAGE:-




     Source Code:


  import 'package:flutter/material.dart';

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

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

class Dream11TeamPage extends StatefulWidget {
  @override
  _Dream11TeamPageState createState() => _Dream11TeamPageState();
}

class _Dream11TeamPageState extends State<Dream11TeamPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(top: 20.0),
            child: Row(
              children: <Widget>[
                Container(width: 40.0, color: Colors.green[500]),
                Container(width: 40.0, color: Colors.green[400]),
                Container(width: 40.0, color: Colors.green[500]),
                Container(width: 40.0, color: Colors.green[400]),
                Container(width: 40.0, color: Colors.green[500]),
                Container(width: 40.0, color: Colors.green[400]),
                Container(width: 40.0, color: Colors.green[500]),
                Container(width: 40.0, color: Colors.green[400]),
                Container(width: 40.0, color: Colors.green[500]),
                Container(width: 40.0, color: Colors.green[400]),
                Container(width: 10.0, color: Colors.green[500]),
              ],
            ),
          ),
          Positioned(
            child: Column(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.fromLTRB(10.0, 30.0, 10.0, 0.0),
                  child: Row(
                    children: <Widget>[
                      Text(
                        'Team1',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 20.0,
                            fontWeight: FontWeight.bold),
                      ),
                      SizedBox(width: 80.0),
                      Container(
                        height: 20.0,
                        width: 100.0,
                        child: Text(
                          'DREAM11',
                          style: TextStyle(
                              fontSize: 20.0,
                              fontWeight: FontWeight.bold,
                              color: Colors.white30),
                        ),
                      ),
                      SizedBox(width: 50.0),
                      Icon(
                        Icons.edit,
                        color: Colors.white,
                        size: 30.0,
                      ),
                      SizedBox(width: 10.0),
                      Icon(
                        Icons.close,
                        color: Colors.white,
                        size: 30.0,
                      ),
                    ],
                  ),
                ),
                SizedBox(height: 20.0),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      'WICKET-KEEPER',
                      style: TextStyle(fontSize: 15.0, color: Colors.white30),
                    )
                  ],
                ),
                SizedBox(height: 30.0),
                Column(
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),
                      child: Material(
                        color: Colors.white10,
                        shape: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(200),
                            borderSide:
                                BorderSide(width: 2.0, color: Colors.white54)),
                        child: Container(
                            height: 420.0,
                            width: 290.0,
                            child: Column(
                              children: <Widget>[
                                SizedBox(height: 100.0),
                                Center(
                                  child: Container(
                                    color: Colors.grey[200],
                                    height: 200.0,
                                    width: 70.0,
                                    child: Stack(
                                      children: <Widget>[
                                        Column(
                                          children: <Widget>[
                                            SizedBox(height: 30.0),
                                            Text(
                                              'BATSMAN',
                                              style: TextStyle(
                                                  color: Colors.black26,
                                                  fontWeight: FontWeight.bold),
                                            ),
                                          ],
                                        ),
                                       
                                      ],
                                    ),
                                    
                                  ),
                                  
                                ),
                                
                              ],
                            )),
                            
                      ),
                    ),
                    
                  ],
                ),
                
              ],
            ),
          ),
            
        ],
      ),
    );
  }
}


1 comment: