Development Environment
Os : Windows 10 (64-bit)
Android Studio Version : android-studio-ide-182.5314842-windows.exe
Flutter Version : flutter_windows_v1.2.1-stable
Device : Redmi Note 5 or Virtual Device
*If u didn't install Android Studio, plz Install
Android Studio Install (ft.Windows 10)
Development Environment Os : Windows 10 (64-bit) 1]Android Studio Install Link : https://developer.android.com/studio/ Android Studio Version : android-studio-ide-182.5314842-windows.exe 1. Android..
witch-dp.tistory.com
*If u didn't install Flutter , plz Install
Flutter Install (ft.Android Studio)
Development Environment Os : Windows 10 (64-bit) Android Studio Version : android-studio-ide-182.5314842-windows.exe *If u didn't install Android Studio, plz Install : https://witch-dp.tistory.com/3..
witch-dp.tistory.com
*If u didn't connect Device, plz Connect
Create and Use Virtual Device or Connect and Use My Smart Phone (ft. Flutter)
Development Environment Os : Windows 10 (64-bit) Android Studio Version : android-studio-ide-182.5314842-windows.exe Flutter Version : flutter_windows_v1.2.1-stable *If u didn't install Android Stud..
witch-dp.tistory.com
({whats_app}/pubspec.yaml)
({whats_app}/assets/icon/witch-dp.png)
({whats_app}/ios/Runner/Info.plist)
({whats_app}/android/app/build.gradle)
({whats_app}/lib/main.dart)
({whats_app}/lib/whats_app_main.dart)
({whats_app}/lib/categories/...)
({whats_app}/lib/content/chat_json.dart)
Just Do it! Step
1: Change Flutter Launcher Icon
2: Use Camera
3: Create Main Category
4: Create Each Categories
5: Create Chat content with json
1: Change Flutter Launcher Icon
-Add Code (pubspec.yaml)
: dev_dependencies
flutter_launcher_icons: "^0.7.0"
-Add Code (pubspec.yaml)
flutter_icons:
android: true
ios: true
image_path: "assets/icon/witch-dp.png"
-Add image file (icon)
: witch-dp.png
-Run Terminal (enter code)
: flutter packages get
: flutter packages pub run flutter_launcher_icons:main
Result]
refer to Link)
pub.dartlang.org
2: Use Camera
-Add Code (Info.plist) ft.IOS
: dict
<key>NSCameraUsageDescription</key>
<string>Can I use the camera please?</string>
<key>NSMicrophoneUsageDescription</key>
<string>Can I use the mic please?</string>
-Change Code (build.gradle) ft.Android
: android ->defaultConfig
minSdkVersion 21
-Add Code (pubspec.yaml)
: dictdependencies
camera:
path_provider:
path:
-Add Code (main.dart)
: import dart:async
: package:camera/camera.dart
import 'dart:async';
import 'package:camera/camera.dart';
-Change Code(main.dart)
:main
Future<void> main() async {
cameras = await availableCameras();
runApp(CameraApp());
}
-Add Code(main.dart)
List<CameraDescription> cameras;
class CameraApp extends StatefulWidget {
@override
_CameraAppState createState() => _CameraAppState();
}
class _CameraAppState extends State<CameraApp> {
CameraController controller;
@override
void initState() {
super.initState();
controller = CameraController(cameras[0], ResolutionPreset.medium);
controller.initialize().then((_) {
if (!mounted) {
return;
}
setState(() {});
});
}
@override
void dispose() {
controller?.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
if (!controller.value.isInitialized) {
return Container();
}
return AspectRatio(
aspectRatio:
controller.value.aspectRatio,
child: CameraPreview(controller));
}
}
Result]
refer to Link)
Using packages
Learn how to use packages in your Flutter app.
flutter.dev
pub.dartlang.org
3: Create Main Category
-Change Code (main.dart)
: CameraApp
class CameraApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "whats_app ft.witch-dp",
theme: new ThemeData(
primaryColor: Colors.red,
accentColor: Colors.redAccent,
),
debugShowCheckedModeBanner: false,
home: new WhatsAppMain(cameras),
);
}
}
-Add Code (main.dart)
:import whats_app_main.dart
import 'package:whats_app/whats_app_main.dart';
-Create dart File (lib/whats_app_main.dart)
: whats_app_main.dart
-Add Code (whats_app_main.dart)
import 'package:flutter/material.dart';
import 'package:camera/camera.dart';
class WhatsAppMain extends StatefulWidget {
var cameras;
WhatsAppMain(this.cameras);
@override
_WhatsAppHomeState createState() => new _WhatsAppHomeState();
}
class _WhatsAppHomeState extends State<WhatsAppMain>
with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
// TODO: implement initState
super.initState();
_tabController = new TabController(vsync: this, initialIndex: 1, length: 4);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("whats_app (ft.witch-dp)"),
elevation: 0.7,
bottom: new TabBar(
controller: _tabController,
indicatorColor: Colors.white,
tabs: <Widget>[
new Tab(icon: new Icon(Icons.call)),
new Tab(text: "Message"),
new Tab(text: "STATUS",),
new Tab(icon: new Icon(
Icons.camera)
),
],
),
actions: <Widget>[
new Icon(Icons.search),
new Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
),
new Icon(Icons.more_vert)
],
),
body: new TabBarView(
controller: _tabController,
children: <Widget>[
new Center(
child: new Text(
"Calls",
style: new TextStyle(fontSize: 20.0),
),
),
new Center(
child: new Text(
"Messages",
style: new TextStyle(fontSize: 20.0),
),
),
new Center(
child: new Text(
"Status",
style: new TextStyle(fontSize: 20.0),
),
),
new CameraApp(widget.cameras),
],
),
floatingActionButton: new FloatingActionButton(
backgroundColor: Theme.of(context).accentColor,
child: new Icon(
Icons.message,
color: Colors.white,
),
onPressed: () => print("open chats"),
),
);
}
}
class CameraApp extends StatefulWidget {
List<CameraDescription> cameras;
CameraApp(this.cameras);
@override
CameraAppState createState() {
return new CameraAppState();
}
}
class CameraAppState extends State<CameraApp> {
CameraController controller;
@override
void initState() {
super.initState();
controller =
new CameraController(widget.cameras[0], ResolutionPreset.medium);
controller.initialize().then((_) {
if (!mounted) {
return;
}
setState(() {});
});
}
@override
void dispose() {
controller?.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
if (!controller.value.isInitialized) {
return Container();
}
return AspectRatio(
aspectRatio:
controller.value.aspectRatio,
child: CameraPreview(controller));
}
}
Result]
4: Create Each Categories
-Change Code (whats_app_main.dart)
: _WhatsAppHomeState -> build -> Scaffold -> TabBarView -> children
<Widget>[
new CallCategory(),
new ChatCategory(),
new StatueCategory(),
new CameraCategory(widget.cameras),
],
-Add Code (whats_app_main.dart)
: import call_category.dart
: import camera_category.dart
: import chat_category.dart
: import status_category.dart
import './categories/call_category.dart';
import './categories/camera_category.dart';
import './categories/chat_category.dart';
import './categories/status_category.dart';
-Create Folder(lib/categories)
: categories
-Create dart File (lib/categories/...)
: call_category.dart
: camera_category.dart
: chat_category.dart
: status_category.dart
-Add Code (call_category.dart)
import 'package:flutter/material.dart';
class CallCategory extends StatelessWidget {
@override
Widget build(BuildContext context) {
return
new Center(
child: new Text(
"Calls",
style: new TextStyle(fontSize: 20.0),
),
);
}
}
-Add Code (chat_category.dart)
import 'package:flutter/material.dart';
class ChatCategory extends StatelessWidget {
@override
Widget build(BuildContext context) {
return
new Center(
child: new Text(
"Chats",
style: new TextStyle(fontSize: 20.0),
),
);
}
}
-Add Code (status_category.dart)
import 'package:flutter/material.dart';
class StatueCategory extends StatelessWidget {
@override
Widget build(BuildContext context) {
return
Center(
child: new Text(
"Status",
style: new TextStyle(fontSize: 20.0),
),
);
}
}
-Add Code (camera_category.dart)
import 'package:flutter/material.dart';
import 'package:camera/camera.dart';
class CameraCategory extends StatefulWidget {
List<CameraDescription> cameras;
CameraCategory(this.cameras);
@override
CameraAppState createState() {
return new CameraAppState();
}
}
class CameraAppState extends State<CameraCategory> {
CameraController controller;
@override
void initState() {
super.initState();
controller =
new CameraController(widget.cameras[0], ResolutionPreset.medium);
controller.initialize().then((_) {
if (!mounted) {
return;
}
setState(() {});
});
}
@override
void dispose() {
controller?.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
if (!controller.value.isInitialized) {
return Container();
}
return AspectRatio(
aspectRatio:
controller.value.aspectRatio,
child: CameraPreview(controller));
}
}
Result]
5: Create Chat content with json
-Add Code (chat_category.dart)
import '../content/chat_json.dart';
-Change Code (chat_category.dart)
class ChatCategory extends StatefulWidget {
@override
ChatCategoryState createState() {
return new ChatCategoryState();
}
}
-Add Code (chat_category.dart)
class ChatCategoryState extends State<ChatCategory> {
@override
Widget build(BuildContext context) {
return new ListView.builder(
itemCount: dummyData.length,
itemBuilder: (context, i) => new Column(
children: <Widget>[
new Divider(
height: 10.0,
),
new ListTile(
leading: new CircleAvatar(
foregroundColor: Theme.of(context).primaryColor,
backgroundColor: Colors.grey,
backgroundImage: new NetworkImage(dummyData[i].avatarUrl),
),
title: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(
dummyData[i].name,
style: new TextStyle(fontWeight: FontWeight.bold),
),
new Text(
dummyData[i].time,
style: new TextStyle(color: Colors.grey, fontSize: 14.0),
),
],
),
subtitle: new Container(
padding: const EdgeInsets.only(top: 5.0),
child: new Text(
dummyData[i].message,
style: new TextStyle(color: Colors.grey, fontSize: 15.0),
),
),
)
],
),
);
}
}
-Create Folder(lib/content)
: content
-Create dart File (lib/content/chat_json.dart)
: chat_json.dart
-Add Code (chat_json.dart)
class ChatModel {
final String name;
final String message;
final String time;
final String avatarUrl;
ChatModel({this.name, this.message, this.time, this.avatarUrl});
}
List<ChatModel> dummyData = [
new ChatModel(
name: "Witch-dp",
message: "This is a whatsapp series!",
time: "10:00",
avatarUrl:
"https://tistory3.daumcdn.net/tistory/3001293/attach/c5a94f096c3f40da9b1b451f05853aff"),
new ChatModel(
name: "Yeon-ho Jeong",
message: "Just do it!",
time: "10:01",
avatarUrl:
"https://tistory3.daumcdn.net/tistory/3001293/attach/c5a94f096c3f40da9b1b451f05853aff"),
new ChatModel(
name: "Jeong Yeon Ho",
message: "You can do it!",
time: "15:27",
avatarUrl:
"https://tistory3.daumcdn.net/tistory/3001293/attach/c5a94f096c3f40da9b1b451f05853aff"),
new ChatModel(
name: "Eun",
message: "Right now!",
time: "22:19",
avatarUrl:
"https://tistory3.daumcdn.net/tistory/3001293/attach/c5a94f096c3f40da9b1b451f05853aff"),
new ChatModel(
name: "Flutter",
message: "Come on!",
time: "20:22",
avatarUrl:
"https://tistory3.daumcdn.net/tistory/3001293/attach/c5a94f096c3f40da9b1b451f05853aff"),
new ChatModel(
name: "Google",
message: "Flutter is so cool!",
time: "05:09",
avatarUrl:
"https://tistory3.daumcdn.net/tistory/3001293/attach/c5a94f096c3f40da9b1b451f05853aff"),
new ChatModel(
name: "Eun",
message: "Good Morning!",
time: "07:00",
avatarUrl:
"https://tistory3.daumcdn.net/tistory/3001293/attach/c5a94f096c3f40da9b1b451f05853aff"),
new ChatModel(
name: "Gyu",
message: "How about?",
time: "00:01",
avatarUrl:
"https://tistory3.daumcdn.net/tistory/3001293/attach/c5a94f096c3f40da9b1b451f05853aff"),
new ChatModel(
name: "Google",
message: "Hurry!!",
time: "12:59",
avatarUrl:
"https://tistory3.daumcdn.net/tistory/3001293/attach/c5a94f096c3f40da9b1b451f05853aff"),
];
Result]
# Example
Result]
refer to Link)
iampawan/FlutterWhatsAppClone
Building a WhatsApp Clone in Flutter. Contribute to iampawan/FlutterWhatsAppClone development by creating an account on GitHub.
github.com
'Study > Flutter' 카테고리의 다른 글
| Flutter] Just Do it! (Basic Series 5 Shooting Game) #yet (0) | 2019.04.26 |
|---|---|
| Flutter] Just Do it! (Basic Series 4 Login) #yet (0) | 2019.04.21 |
| Flutter] Just Do it! (Basic Series 2 Unit Converter) (0) | 2019.03.17 |
| Flutter] Just Do it! (Basic Series 1-2 Navigates The Favorited) (0) | 2019.03.16 |
| Flutter] Just Do it! (Basic Series 1-1 Infinite Scrolling ListView) (0) | 2019.03.14 |
