Created
October 28, 2020 20:07
-
-
Save cankush625/8359d60174598901a85c757cd86b1ae1 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:flutter/material.dart'; | |
| import 'package:flutter_icons/flutter_icons.dart'; | |
| class Home extends StatefulWidget { | |
| @override | |
| _HomeState createState() => _HomeState(); | |
| } | |
| class _HomeState extends State<Home> { | |
| @override | |
| Widget build(BuildContext context) { | |
| return Scaffold( | |
| floatingActionButton: FloatingActionButton( | |
| child: Icon( | |
| Icons.message, | |
| ), | |
| backgroundColor: Colors.blueAccent[700], | |
| ), | |
| body: SafeArea( | |
| child: Column( | |
| children: <Widget>[ | |
| Container( | |
| height: 130, | |
| child: Column( | |
| mainAxisAlignment: MainAxisAlignment.spaceAround, | |
| children: <Widget>[ | |
| Row( | |
| mainAxisAlignment: MainAxisAlignment.spaceBetween, | |
| children: <Widget>[ | |
| Padding( | |
| padding: const EdgeInsets.only(left: 20), | |
| child: Text( | |
| 'ChatApp', | |
| style: TextStyle( | |
| fontSize: 24, | |
| fontWeight: FontWeight.w500, | |
| color: Colors.white, | |
| ), | |
| ), | |
| ), | |
| Container( | |
| width: 100, | |
| child: Row( | |
| mainAxisAlignment: MainAxisAlignment.spaceEvenly, | |
| children: <Widget>[ | |
| Icon( | |
| Icons.search, | |
| color: Colors.white, | |
| ), | |
| Icon( | |
| Icons.more_vert, | |
| color: Colors.white, | |
| ), | |
| ], | |
| ), | |
| ), | |
| ], | |
| ), | |
| Row( | |
| mainAxisAlignment: MainAxisAlignment.spaceBetween, | |
| children: <Widget>[ | |
| Padding( | |
| padding: const EdgeInsets.only(left: 15), | |
| child: Icon( | |
| Icons.camera_alt, | |
| color: Colors.white60, | |
| ), | |
| ), | |
| Row( | |
| children: <Widget>[ | |
| Text( | |
| 'CHATS', | |
| style: TextStyle( | |
| fontSize: 16, | |
| fontWeight: FontWeight.bold, | |
| color: Colors.white, | |
| ), | |
| ), | |
| SizedBox( | |
| width: 4, | |
| ), | |
| Container( | |
| height: 22, | |
| width: 22, | |
| margin: EdgeInsets.fromLTRB(0, 5, 5, 0), | |
| decoration: BoxDecoration( | |
| color: Colors.white, | |
| borderRadius: BorderRadius.circular(11), | |
| ), | |
| child: Center( | |
| child: Text( | |
| '1', | |
| style: TextStyle( | |
| fontSize: 17, | |
| fontWeight: FontWeight.w500, | |
| color: Colors.blue[900], | |
| ), | |
| ), | |
| ), | |
| ), | |
| ], | |
| ), | |
| Text( | |
| 'STATUS', | |
| style: TextStyle( | |
| fontSize: 16, | |
| fontWeight: FontWeight.bold, | |
| color: Colors.white60, | |
| ), | |
| ), | |
| Padding( | |
| padding: const EdgeInsets.only(right: 30), | |
| child: Text( | |
| 'CALLS', | |
| style: TextStyle( | |
| fontSize: 16, | |
| fontWeight: FontWeight.bold, | |
| color: Colors.white60, | |
| ), | |
| ), | |
| ), | |
| ], | |
| ), | |
| ], | |
| ), | |
| decoration: BoxDecoration( | |
| color: Colors.blue[900], | |
| ), | |
| ), | |
| Container( | |
| child: Expanded( | |
| child: ListView( | |
| padding: const EdgeInsets.all(8), | |
| shrinkWrap: true, | |
| children: <Widget>[ | |
| ListTile( | |
| leading: CircleAvatar( | |
| backgroundImage: NetworkImage( | |
| 'https://avatars1.githubusercontent.com/u/41515472?s=400&u=2e83d208268b51f32d5212de73328a501ecd4ce5&v=4', | |
| ), | |
| radius: 28, | |
| ), | |
| title: Text( | |
| 'Ankush Chavan', | |
| style: TextStyle( | |
| fontSize: 20, | |
| fontWeight: FontWeight.w600, | |
| ), | |
| ), | |
| subtitle: Text( | |
| ' ', | |
| style: TextStyle( | |
| fontSize: 17, | |
| fontWeight: FontWeight.w400, | |
| ), | |
| ), | |
| trailing: Column( | |
| crossAxisAlignment: CrossAxisAlignment.end, | |
| children: <Widget>[ | |
| Padding( | |
| padding: const EdgeInsets.only(top: 8), | |
| child: Text( | |
| '10:45 PM', | |
| style: TextStyle( | |
| color: Colors.black, | |
| ), | |
| ), | |
| ), | |
| Container( | |
| height: 25, | |
| width: 25, | |
| margin: EdgeInsets.fromLTRB(0, 5, 5, 0), | |
| decoration: BoxDecoration( | |
| color: Colors.grey, | |
| borderRadius: BorderRadius.circular(12.5), | |
| ), | |
| child: Center( | |
| child: Icon( | |
| AntDesign.pushpin, | |
| ), | |
| // Text( | |
| // '2', | |
| // style: TextStyle( | |
| // fontSize: 17, | |
| // fontWeight: FontWeight.w500, | |
| // color: Colors.white, | |
| // ), | |
| // ), | |
| ), | |
| ), | |
| ], | |
| ), | |
| onTap: () { | |
| Navigator.pushNamed(context, 'chat'); | |
| }, | |
| ), | |
| Container( | |
| margin: EdgeInsets.only(left: 85), | |
| height: 2, | |
| width: 200, | |
| color: Colors.grey[300], | |
| ), | |
| ListTile( | |
| leading: CircleAvatar( | |
| backgroundImage: NetworkImage( | |
| 'https://github.com/cankush625/WhatsApp_Clone/raw/master/assets/images/profilePhotos/random.png', | |
| ), | |
| radius: 28, | |
| ), | |
| title: Text( | |
| 'Mark', | |
| style: TextStyle( | |
| fontSize: 20, | |
| fontWeight: FontWeight.w600, | |
| ), | |
| ), | |
| subtitle: Text( | |
| 'Yeah', | |
| style: TextStyle( | |
| fontSize: 17, | |
| fontWeight: FontWeight.w400, | |
| ), | |
| ), | |
| trailing: Column( | |
| crossAxisAlignment: CrossAxisAlignment.end, | |
| children: <Widget>[ | |
| Padding( | |
| padding: const EdgeInsets.only(top: 8), | |
| child: Text( | |
| '10:30 PM', | |
| style: TextStyle( | |
| color: Colors.lightBlueAccent[200], | |
| fontWeight: FontWeight.w500, | |
| ), | |
| ), | |
| ), | |
| Container( | |
| height: 25, | |
| width: 25, | |
| margin: EdgeInsets.fromLTRB(0, 5, 5, 0), | |
| decoration: BoxDecoration( | |
| color: Colors.lightBlueAccent[200], | |
| borderRadius: BorderRadius.circular(12.5), | |
| ), | |
| child: Center( | |
| child: Text( | |
| '3', | |
| style: TextStyle( | |
| fontSize: 17, | |
| fontWeight: FontWeight.w500, | |
| color: Colors.white, | |
| ), | |
| ), | |
| ), | |
| ), | |
| ], | |
| ), | |
| onTap: () { | |
| print('Pressed the chat'); | |
| }, | |
| ), | |
| Container( | |
| margin: EdgeInsets.only(left: 85), | |
| height: 2, | |
| width: 200, | |
| color: Colors.grey[300], | |
| ), | |
| ListTile( | |
| leading: CircleAvatar( | |
| backgroundImage: NetworkImage( | |
| 'https://github.com/cankush625/WhatsApp_Clone/raw/master/assets/images/profilePhotos/random1.png', | |
| ), | |
| radius: 28, | |
| ), | |
| title: Text( | |
| 'Andrew', | |
| style: TextStyle( | |
| fontSize: 20, | |
| fontWeight: FontWeight.w600, | |
| ), | |
| ), | |
| subtitle: Text( | |
| '👌', | |
| style: TextStyle( | |
| fontSize: 17, | |
| fontWeight: FontWeight.w400, | |
| ), | |
| ), | |
| trailing: Column( | |
| children: <Widget>[ | |
| Padding( | |
| padding: const EdgeInsets.only(top: 10), | |
| child: Text( | |
| '07:45 PM', | |
| ), | |
| ), | |
| ], | |
| ), | |
| onTap: () { | |
| print('Pressed the chat'); | |
| }, | |
| ), | |
| Container( | |
| margin: EdgeInsets.only(left: 85), | |
| height: 2, | |
| width: 200, | |
| color: Colors.grey[300], | |
| ), | |
| ListTile( | |
| leading: CircleAvatar( | |
| backgroundImage: NetworkImage( | |
| 'https://github.com/cankush625/WhatsApp_Clone/raw/master/assets/images/profilePhotos/random2.png', | |
| ), | |
| radius: 28, | |
| ), | |
| title: Text( | |
| 'Bob Smith', | |
| style: TextStyle( | |
| fontSize: 20, | |
| fontWeight: FontWeight.w600, | |
| ), | |
| ), | |
| subtitle: Text( | |
| 'Amazing!✌🎉', | |
| style: TextStyle( | |
| fontSize: 17, | |
| fontWeight: FontWeight.w400, | |
| ), | |
| ), | |
| trailing: Column( | |
| children: <Widget>[ | |
| Padding( | |
| padding: const EdgeInsets.only(top: 10), | |
| child: Text( | |
| '08:00 AM', | |
| ), | |
| ), | |
| ], | |
| ), | |
| onTap: () { | |
| print('Pressed the chat'); | |
| }, | |
| ), | |
| Container( | |
| margin: EdgeInsets.only(left: 85), | |
| height: 2, | |
| width: 200, | |
| color: Colors.grey[300], | |
| ), | |
| ListTile( | |
| leading: CircleAvatar( | |
| backgroundImage: NetworkImage( | |
| 'https://github.com/cankush625/WhatsApp_Clone/raw/master/assets/images/profilePhotos/random3.png', | |
| ), | |
| radius: 28, | |
| ), | |
| title: Text( | |
| 'James', | |
| style: TextStyle( | |
| fontSize: 20, | |
| fontWeight: FontWeight.w600, | |
| ), | |
| ), | |
| subtitle: Text( | |
| '\u2713 Welcome James!', | |
| style: TextStyle( | |
| fontSize: 17, | |
| fontWeight: FontWeight.w400, | |
| ), | |
| ), | |
| trailing: Column( | |
| children: <Widget>[ | |
| Padding( | |
| padding: const EdgeInsets.only(top: 10), | |
| child: Text( | |
| '07:35 AM', | |
| ), | |
| ), | |
| ], | |
| ), | |
| onTap: () { | |
| print('Pressed the chat'); | |
| }, | |
| ), | |
| Container( | |
| margin: EdgeInsets.only(left: 85), | |
| height: 2, | |
| width: 200, | |
| color: Colors.grey[300], | |
| ), | |
| ListTile( | |
| leading: CircleAvatar( | |
| backgroundImage: NetworkImage( | |
| 'https://github.com/cankush625/WhatsApp_Clone/raw/master/assets/images/profilePhotos/random5.png', | |
| ), | |
| radius: 28, | |
| ), | |
| title: Text( | |
| 'Erica', | |
| style: TextStyle( | |
| fontSize: 20, | |
| fontWeight: FontWeight.w600, | |
| ), | |
| ), | |
| subtitle: Text( | |
| '👍', | |
| style: TextStyle( | |
| fontSize: 17, | |
| fontWeight: FontWeight.w400, | |
| ), | |
| ), | |
| trailing: Column( | |
| children: <Widget>[ | |
| Padding( | |
| padding: const EdgeInsets.only(top: 10), | |
| child: Text( | |
| '07:20 AM', | |
| ), | |
| ), | |
| ], | |
| ), | |
| onTap: () { | |
| print('Pressed the chat'); | |
| }, | |
| ), | |
| Container( | |
| margin: EdgeInsets.only(left: 85), | |
| height: 2, | |
| width: 200, | |
| color: Colors.grey[300], | |
| ), | |
| ListTile( | |
| leading: CircleAvatar( | |
| backgroundImage: NetworkImage( | |
| 'https://github.com/cankush625/WhatsApp_Clone/raw/master/assets/images/profilePhotos/random4.png', | |
| ), | |
| radius: 28, | |
| ), | |
| title: Text( | |
| 'Lauren', | |
| style: TextStyle( | |
| fontSize: 20, | |
| fontWeight: FontWeight.w600, | |
| ), | |
| ), | |
| subtitle: Text( | |
| 'Sure', | |
| style: TextStyle( | |
| fontSize: 17, | |
| fontWeight: FontWeight.w400, | |
| ), | |
| ), | |
| trailing: Column( | |
| children: <Widget>[ | |
| Padding( | |
| padding: const EdgeInsets.only(top: 10), | |
| child: Text( | |
| 'YESTERDAY', | |
| ), | |
| ), | |
| ], | |
| ), | |
| onTap: () { | |
| print('Pressed the chat'); | |
| }, | |
| ), | |
| Container( | |
| margin: EdgeInsets.only(left: 85), | |
| height: 2, | |
| width: 200, | |
| color: Colors.grey[300], | |
| ), | |
| ListTile( | |
| leading: CircleAvatar( | |
| backgroundImage: NetworkImage( | |
| 'https://github.com/cankush625/WhatsApp_Clone/raw/master/assets/images/profilePhotos/random6.png', | |
| ), | |
| radius: 28, | |
| ), | |
| title: Text( | |
| 'Jeff', | |
| style: TextStyle( | |
| fontSize: 20, | |
| fontWeight: FontWeight.w600, | |
| ), | |
| ), | |
| subtitle: Text( | |
| 'Done', | |
| style: TextStyle( | |
| fontSize: 17, | |
| fontWeight: FontWeight.w400, | |
| ), | |
| ), | |
| trailing: Column( | |
| children: <Widget>[ | |
| Padding( | |
| padding: const EdgeInsets.only(top: 10), | |
| child: Text( | |
| 'YESTERDAY', | |
| ), | |
| ), | |
| ], | |
| ), | |
| onTap: () { | |
| print('Pressed the chat'); | |
| }, | |
| ), | |
| Container( | |
| margin: EdgeInsets.only(left: 85), | |
| height: 2, | |
| width: 200, | |
| color: Colors.grey[300], | |
| ), | |
| ListTile( | |
| leading: CircleAvatar( | |
| backgroundImage: NetworkImage( | |
| 'https://avatars1.githubusercontent.com/u/41515472?s=400&u=2e83d208268b51f32d5212de73328a501ecd4ce5&v=4', | |
| ), | |
| radius: 28, | |
| ), | |
| title: Text( | |
| 'Robert', | |
| style: TextStyle( | |
| fontSize: 20, | |
| fontWeight: FontWeight.w600, | |
| ), | |
| ), | |
| subtitle: Text( | |
| 'Great!', | |
| style: TextStyle( | |
| fontSize: 17, | |
| fontWeight: FontWeight.w400, | |
| ), | |
| ), | |
| trailing: Column( | |
| children: <Widget>[ | |
| Padding( | |
| padding: const EdgeInsets.only(top: 10), | |
| child: Text( | |
| 'YESTERDAY', | |
| ), | |
| ), | |
| ], | |
| ), | |
| onTap: () { | |
| print('Pressed the chat'); | |
| }, | |
| ), | |
| Container( | |
| margin: EdgeInsets.only(left: 85), | |
| height: 2, | |
| width: 200, | |
| color: Colors.grey[300], | |
| ), | |
| ], | |
| ), | |
| ), | |
| ), | |
| ], | |
| ), | |
| ), | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment