Nama : Lino Verlin

NIM : 1705541004

Tugas 2
Main.dart:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/cupertino.dart';

void main() {
runApp(new verlinApp());
}

class verlinApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "Friendlychat",
theme: defaultTargetPlatform == TargetPlatform.iOS
? kIOSTheme
: kDefaultTheme,
home: new ChatScreen(),
);
}
}

class ChatScreen extends StatefulWidget{

@override
State createState()=>new ChatScreenState();
}

Pada code diatas import ‘..’ digunakan untuk mengimport library kemudian void main
sebagai fungsi utama yang akan dieksekusi sehingga ketika flutter dijalankan maka secara otomatis
mengeksekusi value dari verlinApp. verlinApp merupakan kelas yang berisi stateless widget,
stateless widget adalah widget yang berfungsi untuk menampilkan widget yang nilainya tidak bisa
diubah yang dapat di extends dari class StatelessWidget dan melakukan @override dari method
fungsi Widget build() yang fungsinya untuk mengembalikan sebuah objek Widget sehingga widget
yang ingin ditambahkan dapat ditaruh didalam method fungsi Widget build(). Didalam
MaterialApp berisi fungsi untuk mengatur tema (theme) dan mengatur layar default yang user lihat
dalam app(home), home diatur untuk mereferensikan dari kelas ChatScreen dimana ChatScreen
merupakan StatefulWidget yang berarti widget dapat berubah.
Secara garis besar app ini dibagi menjadi dua subclass dengan dua tipe widget yaitu sebuah
root-level VerlinApp yang tidak dapat berubah (StatelessWidget) dan child Chatscreen
(StatefulWidget) adalah widget yang dapat berubah ketika pesan dikirim dan internal state
berubah.
Nama : Lino Verlin
NIM : 1705541004

class ChatScreenState extends State<ChatScreen> with TickerProviderStateMixin{

final List<ChatMessage> _messages = <ChatMessage>[];
final TextEditingController _textController = new TextEditingController();
bool _isComposing = false;
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Verlin chat"),
elevation:
Theme.of(context).platform == TargetPlatform.iOS ? 0.0 : 4.0,
),
body: new Container(
child: new Column(
children: <Widget>[
new Flexible(child: new ListView.builder(
padding: new EdgeInsets.all(8.0),
reverse: true,
itemBuilder: (_, int index) => _messages[index],
itemCount: _messages.length,
),
),
new Divider(height: 1.0,),
new Container(
decoration: new BoxDecoration(
color: Theme.of(context).cardColor
),
child: _buildTextComposer(),
),
],
),
decoration: Theme.of(context).platform == TargetPlatform.iOS
? new BoxDecoration(
border: new Border(
top: new BorderSide(color: Colors.grey[200]),
),
)
: null),
);
}

Widget _buildTextComposer() {
return new IconTheme(
data: new IconThemeData(color: Theme.of(context).accentColor),
child: new Container(
margin: const EdgeInsets.symmetric(horizontal: 8.0),
child: new Row(
children: <Widget>[
new Flexible(child: new TextField(
controller: _textController,
onChanged: (String text){
setState(() {
_isComposing = text.length > 0;
Nama : Lino Verlin
NIM : 1705541004
});
},
onSubmitted: _handleSubmitted,
decoration: new InputDecoration.collapsed(hintText: "Send a message"),
),
),
new Container(
margin: new EdgeInsets.symmetric(horizontal: 4.0),
child: Theme.of(context).platform == TargetPlatform.iOS ?
new CupertinoButton(
child: new Text("Send"),
onPressed: _isComposing
? () => _handleSubmitted(_textController.text)
: null,) :
new IconButton(
icon: new Icon(Icons.send),
onPressed: _isComposing ?
() => _handleSubmitted(_textController.text) : null,
)
),
],
),
),
);
}

void _handleSubmitted(String text){

_textController.clear();
setState(() {
_isComposing = false;
});
ChatMessage message = new ChatMessage(
text: text,
animationController: new AnimationController(
duration: new Duration(microseconds: 700),
vsync: this,),
);
setState(() {
_messages.insert(0, message);
});
message.animationController.forward();
}
void dispose(){
for (ChatMessage message in _messages)
message.animationController.dispose();
super.dispose();
}
}
Saat chat dikirim maka data yang ditampilkan pada chat screen ketika di run oleh user
maka akan berubah, untuk menampilkan data tersebut maka data perlu dienkapsulasi dalam object
State. Kemudian method build() digunakan memasukkan semua widget yang sebelumnya dibagian
ChatScreen. Ketika framework memanggil method build() untuk refresh UI maka ia akan
Nama : Lino Verlin
NIM : 1705541004

membangun kembali ChatscreenState. Didalam class ChatScreenState dapat di isi sebuah input
field dan send button serta UI untuk menampilkan messages.
1. Final TextEditingController digunakan untuk mendefinisikan method private yang disebut
_buildTextComposer() yang me-return Container widget dengan konfigurasi widget
TextField.
2. Final List<> _messages digunakan ketika user mengirimkan sebuah message dari text fiel
maka app harus menambahkan message baru didalam message list. Dimana
_handleSumbitted() method yang digunakan untuk mengimplementasikan ini.
class ChatMessage extends StatelessWidget{
ChatMessage({this.text, this.animationController});
final String text;
final AnimationController animationController;
@override
Widget build(BuildContext context){
const String _name = "verlin";
return new SizeTransition(
sizeFactor: new CurvedAnimation(
parent: animationController, curve: Curves.easeOut),
axisAlignment: 0.0,
child: new Container(
margin: const EdgeInsets.symmetric(vertical: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
margin: const EdgeInsets.only(right: 16.0),
child: new CircleAvatar(child: new Text(_name[0])),
),
new Expanded(child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(_name, style: Theme.of(context).textTheme.subhead),
new Container(
margin: const EdgeInsets.only(top: 5.0),
child: new Text(text),
),],),),],),)
);
}
}

kemudian dibutuhkan widget yang menampilkan sebuah chat message, dengan

mendifinisikan StatelessWidget pada ChatMessage. Method build() digunakan me-returnkan
sebuah baris widget yang menampilkan avatar untuk merepresentasikan user yang mengirimkan
message, sebuah Column widget berisi nama pengirim dan text dari message.
Nama : Lino Verlin
NIM : 1705541004
//theme colors
final ThemeData kIOSTheme = new ThemeData(
primaryColor: Colors.greenAccent[100],
primaryColorBrightness: Brightness.dark,
primarySwatch: Colors.blue,
);
final ThemeData kDefaultTheme = new ThemeData(
primarySwatch: Colors.deepPurple,
accentColor: Colors.brown,
);
Code diatas digunakan untuk mengatur warna tema yang pada app.

Hasil running App:

Nama : Lino Verlin
NIM : 1705541004

Main.dart code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/cupertino.dart';

void main() {
runApp(new verlinApp());
}

class verlinApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "Friendlychat",
theme: defaultTargetPlatform == TargetPlatform.iOS
? kIOSTheme
: kDefaultTheme,
home: new ChatScreen(),
);
}
}

class ChatScreen extends StatefulWidget{

@override
State createState()=>new ChatScreenState();
}

class ChatScreenState extends State<ChatScreen> with TickerProviderStateMixin{

final List<ChatMessage> _messages = <ChatMessage>[];
final TextEditingController _textController = new TextEditingController();
bool _isComposing = false;
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Verlin chat"),
elevation:
Theme.of(context).platform == TargetPlatform.iOS ? 0.0 : 4.0,
),
body: new Container(
child: new Column(
children: <Widget>[
new Flexible(child: new ListView.builder(
padding: new EdgeInsets.all(8.0),
reverse: true,
itemBuilder: (_, int index) => _messages[index],
itemCount: _messages.length,
),
),
new Divider(height: 1.0,),
new Container(
decoration: new BoxDecoration(
color: Theme.of(context).cardColor
Nama : Lino Verlin
NIM : 1705541004
),
child: _buildTextComposer(),
),
],
),
decoration: Theme.of(context).platform == TargetPlatform.iOS
? new BoxDecoration(
border: new Border(
top: new BorderSide(color: Colors.grey[200]),
),
)
: null),
);
}

Widget _buildTextComposer() {
return new IconTheme(
data: new IconThemeData(color: Theme.of(context).accentColor),
child: new Container(
margin: const EdgeInsets.symmetric(horizontal: 8.0),
child: new Row(
children: <Widget>[
new Flexible(child: new TextField(
controller: _textController,
onChanged: (String text){
setState(() {
_isComposing = text.length > 0;
});
},
onSubmitted: _handleSubmitted,
decoration: new InputDecoration.collapsed(hintText: "Send a message"),
),
),
new Container(
margin: new EdgeInsets.symmetric(horizontal: 4.0),
child: Theme.of(context).platform == TargetPlatform.iOS ?
new CupertinoButton(
child: new Text("Send"),
onPressed: _isComposing
? () => _handleSubmitted(_textController.text)
: null,) :
new IconButton(
icon: new Icon(Icons.send),
onPressed: _isComposing ?
() => _handleSubmitted(_textController.text) : null,
)
),
],
),
),
);
}

void _handleSubmitted(String text){

_textController.clear();
Nama : Lino Verlin
NIM : 1705541004
setState(() {
_isComposing = false;
});
ChatMessage message = new ChatMessage(
text: text,
animationController: new AnimationController(
duration: new Duration(microseconds: 700),
vsync: this,),
);
setState(() {
_messages.insert(0, message);
});
message.animationController.forward();
}

void dispose(){
for (ChatMessage message in _messages)
message.animationController.dispose();
super.dispose();
}
}

class ChatMessage extends StatelessWidget{

ChatMessage({this.text, this.animationController});
final String text;
final AnimationController animationController;
@override
Widget build(BuildContext context){
const String _name = "verlin";
return new SizeTransition(
sizeFactor: new CurvedAnimation(
parent: animationController, curve: Curves.easeOut),
axisAlignment: 0.0,
child: new Container(
margin: const EdgeInsets.symmetric(vertical: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
margin: const EdgeInsets.only(right: 16.0),
child: new CircleAvatar(child: new Text(_name[0])),
),
new Expanded(child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(_name, style: Theme.of(context).textTheme.subhead),
new Container(
margin: const EdgeInsets.only(top: 5.0),
child: new Text(text),
),
],
),),
],
),
)
Nama : Lino Verlin
NIM : 1705541004
);
}
}

//theme colors
final ThemeData kIOSTheme = new ThemeData(
primaryColor: Colors.greenAccent[100],
primaryColorBrightness: Brightness.dark,
primarySwatch: Colors.blue,
);
final ThemeData kDefaultTheme = new ThemeData(
primarySwatch: Colors.deepPurple,
accentColor: Colors.brown,
);