Skip to content

Trying responsive login screen #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RohanPatil1 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Trying responsive login screen #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 113 additions & 0 deletions lib/screens/create_account_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
import 'package:fbk_clone/config/palette.dart';
import 'package:fbk_clone/utils/other_utils.dart';
import 'package:fbk_clone/widgets/custom_input.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class CreateAccountScreen extends StatefulWidget {
@override
_CreateAccountScreenState createState() => _CreateAccountScreenState();
}

class _CreateAccountScreenState extends State<CreateAccountScreen> {
String email, password;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
centerTitle: true,
title: Text("www.facebook.com",
style: TextStyle(color: Palette.facebookBlue, fontSize: 18.0)),
),
body: Stack(
children: [
Positioned.fill(
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
height: MediaQuery.of(context).size.height * 0.5,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
CustomInput(
hintText: "Phone number or email address",
onChanged: (value) {
email = value;
},
onSubmitted: (value) {
email = value;

// OtherUtils().passwordFocusNode.requestFocus();
},
textInputAction: TextInputAction.next,
),
CustomInput(
hintText: "Password",
onChanged: (value) {
password = value;
},
// focusNode: OtherUtils().passwordFocusNode,
isPasswordField: true,
onSubmitted: (value) {
password = value;

OtherUtils()
.submitCreateAccForm(context, email, password);
},
),
InkWell(
onTap: () {
OtherUtils()
.submitCreateAccForm(context, email, password);
},
child: Container(
margin: EdgeInsets.symmetric(
horizontal: 12.0, vertical: 18.0),
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(5.0)),
child: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Create New Facebook Account",
style: GoogleFonts.roboto(
color: Colors.white,
fontWeight: FontWeight.w500,
fontSize: 16.0),
),
)),
),
)
],
),
],
),
),
),
),
Positioned(
bottom: MediaQuery.of(context).size.height * 0.62,
left: MediaQuery.of(context).size.width * 0.4,
// duration: Duration(milliseconds: 500),
// curve: Curves.easeInOut,
child: Container(
alignment: Alignment.center,
child: Image.asset(
"assets/fblogo.png",
color: Palette.facebookBlue,
scale: 8.0,
),
),
)
],
),
);
}
}
141 changes: 56 additions & 85 deletions lib/screens/home_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import 'package:fbk_clone/config/palette.dart';
import 'package:fbk_clone/data/data.dart';
import 'package:fbk_clone/models/models.dart';
import 'package:fbk_clone/widgets/circle_button.dart';
import 'package:fbk_clone/widgets/create_post_container.dart';
import 'package:fbk_clone/widgets/widgets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_facebook_responsive_ui/config/palette.dart';
import 'package:flutter_facebook_responsive_ui/data/data.dart';
import 'package:flutter_facebook_responsive_ui/models/models.dart';
import 'package:flutter_facebook_responsive_ui/widgets/widgets.dart';
import 'package:fbk_clone/data/data.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';

class HomeScreen extends StatefulWidget {
Expand All @@ -11,73 +14,52 @@ class HomeScreen extends StatefulWidget {
}

class _HomeScreenState extends State<HomeScreen> {
final TrackingScrollController _trackingScrollController =
TrackingScrollController();

@override
void dispose() {
_trackingScrollController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return GestureDetector(
//To enable unfocus of the textfield by clicking anywhere on the screen
onTap: () => FocusScope.of(context).unfocus(),
child: Scaffold(
body: Responsive(
mobile:
_HomeScreenMobile(scrollController: _trackingScrollController),
desktop:
_HomeScreenDesktop(scrollController: _trackingScrollController),
mobile: _HomeScreenMobile(),
desktop: _HomeScreenDesktop(),
),
),
);
}
}

class _HomeScreenMobile extends StatelessWidget {
final TrackingScrollController scrollController;

const _HomeScreenMobile({
Key key,
@required this.scrollController,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return CustomScrollView(
controller: scrollController,
slivers: [
SliverAppBar(
brightness: Brightness.light,
backgroundColor: Colors.white,
title: Text(
'facebook',
"facebook",
style: const TextStyle(
color: Palette.facebookBlue,
fontSize: 28.0,
fontWeight: FontWeight.bold,
letterSpacing: -1.2,
),
color: Palette.facebookBlue,
fontSize: 28.0,
letterSpacing: -1.2,
fontWeight: FontWeight.bold),
),
centerTitle: false,
floating: true,
actions: [
CircleButton(
icon: Icons.search,
iconSize: 30.0,
onPressed: () => print('Search'),
),
CircleButton(
icon: MdiIcons.facebookMessenger,
iconSize: 30.0,
onPressed: () => print('Messenger'),
),
GreyCircularrBtn(
icon: Icons.search, iconSize: 30.0, onPressed: () {}),
GreyCircularrBtn(
icon: MdiIcons.facebookMessenger,
iconSize: 30.0,
onPressed: () {}),
],
),
SliverToBoxAdapter(
child: CreatePostContainer(currentUser: currentUser),
child: CreatePostContainer(
currentUser: currentUser,
),
),
SliverPadding(
padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 5.0),
Expand All @@ -95,46 +77,36 @@ class _HomeScreenMobile extends StatelessWidget {
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
final Post post = posts[index];
return PostContainer(post: post);
},
childCount: posts.length,
),
),
delegate: SliverChildBuilderDelegate((context, index) {
final Post currPost = posts[index];
return PostContainer(
post: currPost,
);
}, childCount: posts.length))
],
);
}
}

class _HomeScreenDesktop extends StatelessWidget {
final TrackingScrollController scrollController;

const _HomeScreenDesktop({
Key key,
@required this.scrollController,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Row(
children: [
Flexible(
flex: 2,
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: MoreOptionsList(currentUser: currentUser),
),
),
),
flex: 2,
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.all(12.0),
child: MoreOptionsList(
currentUser: currentUser,
)),
)),
const Spacer(),
Container(
width: 600.0,
child: CustomScrollView(
controller: scrollController,
slivers: [
SliverPadding(
padding: const EdgeInsets.fromLTRB(0.0, 20.0, 0.0, 10.0),
Expand All @@ -146,7 +118,9 @@ class _HomeScreenDesktop extends StatelessWidget {
),
),
SliverToBoxAdapter(
child: CreatePostContainer(currentUser: currentUser),
child: CreatePostContainer(
currentUser: currentUser,
),
),
SliverPadding(
padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 5.0),
Expand All @@ -155,28 +129,25 @@ class _HomeScreenDesktop extends StatelessWidget {
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
final Post post = posts[index];
return PostContainer(post: post);
},
childCount: posts.length,
),
),
delegate: SliverChildBuilderDelegate((context, index) {
final Post currPost = posts[index];
return PostContainer(
post: currPost,
);
}, childCount: posts.length))
],
),
),
const Spacer(),
Flexible(
flex: 2,
child: Align(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: ContactsList(users: onlineUsers),
),
),
),
flex: 2,
child: Align(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: ContactsList(users: onlineUsers),
),
)),
],
);
}
Expand Down
Loading