Skip to content

Commit

Permalink
DAY - 07 - working on camera screen and fix tabs issues add controlle…
Browse files Browse the repository at this point in the history 
…r to it
  • Loading branch information
@Huzaifaahmed20
Huzaifaahmed20 committed May 16, 2020
1 parent afd259b commit 273d0c4
Show file tree
Hide file tree
Showing 6 changed files with 215 additions and 92 deletions.
2 changes: 1 addition & 1 deletion android/app/build.gradle
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ android {
defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId "com.example.flutter_whatsapp_redesign"
minSdkVersion 16
minSdkVersion 21
targetSdkVersion 28
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
Expand Down
2 changes: 1 addition & 1 deletion lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ class MyApp extends StatelessWidget {
color: Colors.white,
),
),
home: RegistrationScreen(),
home: HomeScreen(),
routes: {
PhoneVerifyScreen.routeName: (_) => PhoneVerifyScreen(),
HomeScreen.routeName: (_) => HomeScreen(),
Expand Down
205 changes: 116 additions & 89 deletions lib/screens/HomeScreen.dart
View file
Original file line number Diff line number Diff line change
@@ -1,113 +1,140 @@
import 'package:flutter/material.dart';
import 'package:flutter_whatsapp_redesign/screens/TabScreens/CallsListScreen.dart';
import 'package:flutter_whatsapp_redesign/screens/TabScreens/CameraScreen.dart';
import 'package:flutter_whatsapp_redesign/screens/TabScreens/ChatsListScreen.dart';
import 'package:flutter_whatsapp_redesign/screens/TabScreens/GroupsScreen.dart';
import 'package:flutter_whatsapp_redesign/screens/TabScreens/StatusScreen.dart';
import 'package:flutter_whatsapp_redesign/utils/UserProfile.dart';
import 'package:flutter_whatsapp_redesign/widgets/BuilderMethodsWidgets.dart';

class HomeScreen extends StatelessWidget {
class HomeScreen extends StatefulWidget {
static const routeName = '/homescreen';
@override
_HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {
final userProfile = UserProfile().profile;
bool _isShowAppBar = true;
TabController tabController;
final statusIndicatorWidget = BuilderMethodsWidgets().statusIndicator;

@override
void initState() {
super.initState();
tabController = TabController(vsync: this, length: 5, initialIndex: 1)
..addListener(() {
switch (tabController.index) {
case 1:
setState(() {
_isShowAppBar = true;
});
break;
}
});
}

@override
Widget build(BuildContext context) {
List<Widget> _tabs = [
CameraScreen(callback: (val) => setState(() => _isShowAppBar = val)),
ChatsListScreen(),
StatusScreen(),
GroupsScreen(),
CallsListScreen()
];

double orjWidth = MediaQuery.of(context).size.width;
double cameraWidth = orjWidth * 0.05;
double yourWidth = (orjWidth - cameraWidth) * 0.12;
return DefaultTabController(
initialIndex: 1,
length: 5,
child: Scaffold(
floatingActionButton: FloatingActionButton(
backgroundColor: Color(0xff06A88E),
child: Icon(Icons.message),
onPressed: () {},
),
appBar: AppBar(
title: Text(
'Hi, Huzaifa',
style: Theme.of(context)
.textTheme
.subtitle
.copyWith(color: Color(0xff242424)),
),
leading: Padding(
padding: EdgeInsets.all(10),
child: Stack(
children: <Widget>[
ClipOval(
child: FadeInImage.assetNetwork(
placeholder: userProfile.placeholderAvatar,
image: userProfile.avatar,
return Scaffold(
// floatingActionButton: FloatingActionButton(
// backgroundColor: Color(0xff06A88E),
// child: Icon(Icons.message),
// onPressed: () {},
// ),
appBar: !_isShowAppBar
? null
: AppBar(
title: Text(
'Hi, Huzaifa',
style: Theme.of(context)
.textTheme
.subtitle
.copyWith(color: Color(0xff242424)),
),
leading: Padding(
padding: EdgeInsets.all(10),
child: Stack(
children: <Widget>[
ClipOval(
child: FadeInImage.assetNetwork(
placeholder: userProfile.placeholderAvatar,
image: userProfile.avatar,
),
),
Positioned(top: 3, child: statusIndicatorWidget())
],
),
),
Positioned(top: 3, child: statusIndicatorWidget())
],
),
),
actions: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 10),
child: IconButton(
icon: Icon(
Icons.search,
color: Color(0xff06A88E),
size: 30,
actions: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 10),
child: IconButton(
icon: Icon(
Icons.search,
color: Color(0xff06A88E),
size: 30,
),
onPressed: () {}),
),
onPressed: () {}),
),
Padding(
padding: const EdgeInsets.only(right: 20),
child: CircleAvatar(
child: IconButton(
icon: Icon(Icons.more_horiz),
onPressed: () {},
Padding(
padding: const EdgeInsets.only(right: 20),
child: CircleAvatar(
child: IconButton(
icon: Icon(Icons.more_horiz),
onPressed: () {},
),
backgroundColor: Color(0xff06A88E),
),
)
],
bottom: TabBar(
controller: tabController,
isScrollable: true,
indicatorColor: Color(0xff06A88E),
labelColor: Color(0xff06A88E),
labelStyle: Theme.of(context)
.textTheme
.subtitle
.copyWith(fontSize: 12, fontWeight: FontWeight.bold),
tabs: [
Container(
child: Tab(icon: Icon(Icons.camera_alt)),
width: cameraWidth,
),
Container(
child: Tab(text: 'Chat'),
width: yourWidth,
),
Container(
child: Tab(text: 'Status'),
width: yourWidth,
),
Container(
child: Tab(text: 'Groups'),
width: yourWidth,
),
Container(
child: Tab(text: 'Call'),
width: yourWidth,
),
],
),
backgroundColor: Color(0xff06A88E),
),
)
],
bottom: TabBar(
isScrollable: true,
indicatorColor: Color(0xff06A88E),
labelColor: Color(0xff06A88E),
labelStyle:
Theme.of(context).textTheme.subtitle.copyWith(fontSize: 12,fontWeight: FontWeight.bold),
tabs: [
Container(
child: Tab(icon: Icon(Icons.camera_alt)),
width: cameraWidth,
),
Container(
child: Tab(text: 'Chat'),
width: yourWidth,
),
Container(
child: Tab(text: 'Status'),
width: yourWidth,
),
Container(
child: Tab(text: 'Groups'),
width: yourWidth,
),
Container(
child: Tab(text: 'Call'),
width: yourWidth,
),
],
),
),
body: TabBarView(
children: [
Icon(Icons.camera_enhance),
ChatsListScreen(),
StatusScreen(),
GroupsScreen(),
CallsListScreen()
],
),
),
);
children: _tabs,
controller: tabController,
));
}
}
88 changes: 88 additions & 0 deletions lib/screens/TabScreens/CameraScreen.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import 'package:flutter/material.dart';
import 'package:camera/camera.dart';
import 'package:flutter_whatsapp_redesign/screens/HomeScreen.dart';

class CameraScreen extends StatefulWidget {
final Function callback;
CameraScreen({this.callback});

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

class _CameraScreenState extends State<CameraScreen> {
List<CameraDescription> _cameras;
CameraController _controller;
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

Future<void> _initCamera() async {
_cameras = await availableCameras();

_controller = CameraController(_cameras[0], ResolutionPreset.medium);
_controller.initialize().then((_) {
if (!mounted) {
return;
}
widget.callback(false);
setState(() {});
});
}

// @override
// void dispose() {
// _controller?.dispose();
// super.dispose();
// }

@override
void initState() {
_initCamera();
super.initState();
}

Widget _buildCameraPreview() {
final size = MediaQuery.of(context).size;
return ClipRect(
child: Container(
child: Transform.scale(
scale: _controller.value.aspectRatio / size.aspectRatio,
child: Center(
child: AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: CameraPreview(_controller),
),
),
),
),
);
}

@override
Widget build(BuildContext context) {
if (_controller != null) {
if (!_controller.value.isInitialized) {
return Container();
}
} else {
return const Center(
child: SizedBox(
width: 32,
height: 32,
child: CircularProgressIndicator(),
),
);
}
if (!_controller.value.isInitialized) {
return Container();
}
return Scaffold(
backgroundColor: Theme.of(context).backgroundColor,
key: _scaffoldKey,
body: Stack(
children: <Widget>[
_buildCameraPreview(),
],
),
);
}
}
9 changes: 8 additions & 1 deletion pubspec.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.5"
camera:
dependency: "direct main"
description:
name: camera
url: "https://pub.dartlang.org"
source: hosted
version: "0.5.8+1"
charcode:
dependency: transitive
description:
Expand Down Expand Up @@ -221,4 +228,4 @@ packages:
version: "3.5.0"
sdks:
dart: ">=2.4.0 <3.0.0"
flutter: ">=1.6.7 <2.0.0"
flutter: ">=1.12.13+hotfix.5 <2.0.0"
1 change: 1 addition & 0 deletions pubspec.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ environment:
dependencies:
flutter:
sdk: flutter
camera:
flutter_svg: ^0.17.4
flutter_slidable: ^0.5.4

Expand Down

0 comments on commit 273d0c4

Please sign in to comment.