Created
December 8, 2019 16:50
-
-
Save cnruby/79487bd1844537d63e431973d95e6fca to your computer and use it in GitHub Desktop.
Flutter App 3D: Customize for iOS and Android
This file contains 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/foundation.dart'; | |
import 'package:flutter/cupertino.dart'; | |
const String _name = "YourName"; | |
final ThemeData kIOSTheme = new ThemeData( | |
primarySwatch: Colors.orange, | |
primaryColor: Colors.grey[100], | |
primaryColorBrightness: Brightness.light, | |
); | |
final ThemeData kDefaultTheme = new ThemeData( | |
primarySwatch: Colors.purple, | |
accentColor: Colors.orangeAccent[400], | |
); | |
void main() { | |
runApp(new FriendlychatApp()); | |
} | |
class FriendlychatApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return new MaterialApp( | |
theme: defaultTargetPlatform == TargetPlatform.iOS | |
? kIOSTheme | |
: kDefaultTheme, | |
title: "Friendlychat", | |
home: new ChatScreen(), | |
); | |
} | |
} | |
class ChatScreen extends StatefulWidget { | |
@override | |
State createState() => new ChatScreenState(); | |
} | |
class ChatMessage extends StatelessWidget { | |
ChatMessage({this.text, this.animationController}); | |
final String text; | |
final AnimationController animationController; | |
@override | |
Widget build(BuildContext context) { | |
return new SizeTransition( | |
sizeFactor: new CurvedAnimation( | |
parent: animationController, | |
// https://api.flutter.dev/flutter/animation/Curves-class.html | |
//curve: Curves.easeOut | |
curve: Curves.linear), | |
axisAlignment: 0.0, | |
child: new Container( | |
decoration: myBoxDecoration(), | |
margin: const EdgeInsets.symmetric(vertical: 10.0), | |
child: new Row( | |
crossAxisAlignment: CrossAxisAlignment.start, | |
children: <Widget>[ | |
new Container( | |
decoration: myBoxDecoration(), | |
margin: const EdgeInsets.only(right: 16.0), | |
child: new CircleAvatar(child: new Text(_name[0])), | |
), | |
new Expanded( | |
//new | |
child: new Column( | |
//modified | |
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), | |
), | |
], | |
), | |
), | |
], | |
), | |
)); | |
} | |
BoxDecoration myBoxDecoration() { | |
return BoxDecoration( | |
border: Border.all( | |
width: 3.0, | |
color: Colors.blue, | |
), | |
borderRadius: BorderRadius.all(Radius.circular(5.0)), | |
); | |
} | |
} | |
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("Friendlychat"), | |
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: myBoxDecoration(), | |
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[400]), | |
), | |
) | |
: null), | |
); | |
} | |
Widget _buildTextComposer() { | |
return new Container( | |
decoration: myBoxDecoration(), | |
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( | |
decoration: myBoxDecoration(), | |
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, | |
)), | |
], | |
), | |
); | |
} | |
@override | |
void dispose() { | |
for (ChatMessage message in _messages) | |
message.animationController.dispose(); | |
super.dispose(); | |
} | |
void _handleSubmitted(String text) { | |
_textController.clear(); | |
setState(() { | |
_isComposing = false; | |
}); | |
ChatMessage message = new ChatMessage( | |
text: text, | |
animationController: new AnimationController( | |
duration: new Duration(milliseconds: 1500), | |
vsync: this, | |
), | |
); | |
setState(() { | |
_messages.insert(0, message); | |
}); | |
message.animationController.forward(); | |
} | |
BoxDecoration myBoxDecoration() { | |
return BoxDecoration( | |
border: Border.all( | |
width: 3.0, | |
color: Colors.blue, | |
), | |
borderRadius: BorderRadius.all(Radius.circular(5.0)), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment