我想用向上滑动面板构建一个简单的应用程序，在这个向上滑动面板中应该有一个与聊天机器人聊天，我已经写了一个在颤振中工作的聊天机器人应用程序和一个带有向上滑动面板的工作应用程序，但现在我真的不知道如何让聊天进入上滑面板......因此，如果我可以简单地将其他 dart 文件实现到上滑面板中，那将是最简单的。
到目前为止，我已经尝试将应用程序 eineld 相互集成，但每次都失败......
正常运行的上滑面板应用程序 (main.dart) 的代码
import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';
import 'package:flutter/services.dart';
void main() => runApp(SlidingUpPanelExample());
class SlidingUpPanelExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.grey[200],
systemNavigationBarIconBrightness: Brightness.dark,
systemNavigationBarDividerColor: Colors.black,
));
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'MS AI',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final double _initFabHeight = 120.0;
double _fabHeight;
double _panelHeightOpen = 575.0;
double _panelHeightClosed = 95.0;
@override
void initState(){
super.initState();
_fabHeight = _initFabHeight;
}
@override
Widget build(BuildContext context){
return Material(
child: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
SlidingUpPanel(
maxHeight: _panelHeightOpen,
minHeight: _panelHeightClosed,
parallaxEnabled: true,
parallaxOffset: .5,
body: _body(),
panel: _panel(),
borderRadius: BorderRadius.only(topLeft: Radius.circular(18.0), topRight: Radius.circular(18.0)),
onPanelSlide: (double pos) => setState((){
_fabHeight = pos * (_panelHeightOpen - _panelHeightClosed) + _initFabHeight;
}),
),
Positioned(
top: 42.0,
child: Container(
padding: const EdgeInsets.fromLTRB(24.0, 18.0, 24.0, 18.0),
child: Text(
"AI",
style: TextStyle(
fontWeight: FontWeight.w500
),
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(24.0),
boxShadow: [BoxShadow(
color: Color.fromRGBO(0, 0, 0, .25),
blurRadius: 16.0
)],
),
),
),
],
),
);
}
Widget _panel(){
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 12.0,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 30,
height: 5,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(12.0))
),
),
],
),
SizedBox(height: 18.0,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Chat",
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 24.0,
),
),
],
),
SizedBox(height: 36.0,),
Container(
padding: const EdgeInsets.only(left: 24.0, right: 24.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("This is where the chat should go", style: TextStyle(fontWeight: FontWeight.w600,)),
],
),
),
],
);
}
Widget _button(String label, IconData icon, Color color){
return Column(
children: <Widget>[
Container(
padding: const EdgeInsets.all(16.0),
child: Icon(
icon,
color: Colors.white,
),
decoration: BoxDecoration(
color: color,
shape: BoxShape.circle,
boxShadow: [BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.15),
blurRadius: 8.0,
)]
),
),
SizedBox(height: 12.0,),
Text(label),
],
);
}
Widget _body(){
}
}
工作聊天机器人应用程序的代码 (chat.dart)
import 'package:flutter/material.dart';
import 'package:flutter_dialogflow/dialogflow_v2.dart';
import 'package:flutter/services.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.grey[200],
systemNavigationBarIconBrightness: Brightness.dark,
systemNavigationBarDividerColor: Colors.black,
));
return new MaterialApp(
title: 'MS-AI',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: new HomePageDialogflow(),
);
}
}
class HomePageDialogflow extends StatefulWidget {
HomePageDialogflow({Key key, this.title}) : super(key: key);
final String title;
@override
_HomePageDialogflow createState() => new _HomePageDialogflow();
}
class _HomePageDialogflow extends State<HomePageDialogflow> {
final List<ChatMessage> _messages = <ChatMessage>[];
final TextEditingController _textController = new TextEditingController();
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,
onSubmitted: _handleSubmitted,
decoration:
new InputDecoration.collapsed(hintText: "Send a message"),
),
),
new Container(
margin: new EdgeInsets.symmetric(horizontal: 4.0),
child: new IconButton(
icon: new Icon(Icons.send),
onPressed: () => _handleSubmitted(_textController.text)),
),
],
),
),
);
}
void response(query) async {
_textController.clear();
AuthGoogle authGoogle =
await AuthGoogle(fileJson: "assets/credentials.json")
.build();
Dialogflow dialogflow =
Dialogflow(authGoogle: authGoogle, language: Language.english);
AIResponse response = await dialogflow.detectIntent(query);
ChatMessage message = new ChatMessage(
text: response.getMessage() ??
new CardDialogflow(response.getListMessage()[0]).title,
name: "AI",
type: false,
);
setState(() {
_messages.insert(0, message);
});
}
void _handleSubmitted(String text) {
_textController.clear();
ChatMessage message = new ChatMessage(
text: text,
name: "User",
type: true,
);
setState(() {
_messages.insert(0, message);
});
response(text);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
centerTitle: true,
title: new Text("MS-AI"),
),
body: 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(),
),
]),
);
}
}
class ChatMessage extends StatelessWidget {
ChatMessage({this.text, this.name, this.type});
final String text;
final String name;
final bool type;
List<Widget> otherMessage(context) {
return <Widget>[
new Container(
margin: const EdgeInsets.only(right: 16.0),
child: new CircleAvatar(child: new Text('AI')),
),
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(this.name,
style: new TextStyle(fontWeight: FontWeight.bold)),
new Container(
margin: const EdgeInsets.only(top: 5.0),
child: new Text(text),
),
],
),
),
];
}
List<Widget> myMessage(context) {
return <Widget>[
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Text(this.name, style: Theme.of(context).textTheme.subhead),
new Container(
margin: const EdgeInsets.only(top: 5.0),
child: new Text(text),
),
],
),
),
new Container(
margin: const EdgeInsets.only(left: 16.0),
child: new CircleAvatar(
child: new Text(
this.name[0],
style: new TextStyle(fontWeight: FontWeight.bold),
)),
),
];
}
@override
Widget build(BuildContext context) {
return new Container(
margin: const EdgeInsets.symmetric(vertical: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: this.type ? myMessage(context) : otherMessage(context),
),
);
}
}
提前致谢。