@override
_MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State {

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(“WhatsApp”),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [

],
),
),
);
}
}

The AppBar

AppBar 具有应用程序的标题，以及两个操作：搜索和菜单。

将其添加到 AppBar 中，

appBar: new AppBar(
title: new Text(“WhatsApp”, style: TextStyle(color: Colors.white, fontSize: 22.0, fontWeight: FontWeight.w600),),
actions: [
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: Icon(Icons.search),
),
Padding(
padding: const EdgeInsets.only(right: 16.0),
child: Icon(Icons.more_vert),
),
],
backgroundColor: whatsAppGreen,
),

代码结果如下：

现在继续

The Tabs

tabs（选项卡）是 AppBar 的简单扩展，Flutter 使它们非常容易实现。

AppBar 有一个“底部”字段，用于保存我们的标签：

bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.camera_alt),),
Tab(child: Text(“CHATS”),),
Tab(child: Text(“STATUS”,)),
Tab(child: Text(“CALLS”,)),
], indicatorColor: Colors.white,
),

此外，我们需要一个 TabController 来实现这一点。

创建一个新的 TabController。

TabController tabController;

@override
void initState() {
// TODO: implement initState
super.initState();

tabController = TabController(vsync: this, length: 4);

}

现在将该控制器添加到 TabBar 的 “controller” 字段中。

bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.camera_alt),),
Tab(child: Text(“CHATS”),),
Tab(child: Text(“STATUS”,)),
Tab(child: Text(“CALLS”,)),
], indicatorColor: Colors.white,
controller: tabController,
),

而对于 TabBarView

body: TabBarView(
controller: tabController,
children: [
Icon(Icons.camera_alt),
Text(“Chat Screen”),
Text(“Status Screen”),
Text(“Call Screen”),
],
),

现在，在转到各个页面之前，我们将添加选项卡所代表的页面。用以下方法切换脚手架的现有“正文”代码：

body: TabBarView(
children: [
Icon(Icons.camera_alt),
Text(“Chat Screen”),
Text(“Status Screen”),
Text(“Call Screen”),
],
),

子项代表选项卡所用的页面。现在整个页面都是一个 Text 小部件。

悬浮按钮

Floating Action Button 根据屏幕上的页面而变化。

首先在脚手架中添加一个 FloatingActionButton。

floatingActionButton: FloatingActionButton(
onPressed: () {
},
child: fabIcon,
backgroundColor: whatsAppGreenLight,
),

“fabIcon” 字段只存储要显示的图标，因为我们需要根据显示的屏幕更改显示的图标。

要监听选项卡选定的更改，需要给 TabController 添加一个监听器。

tabController = TabController(vsync: this, length: 4)
…addListener(() {

});

现在，当标签控制器实现页面已更改时，请更改 FAB 图标。

tabController = TabController(vsync: this, length: 4)
…addListener(() {
setState(() {
switch(tabController.index) {
case 0:
break;
case 1:
fabIcon = Icons.message;
break;
case 2:
fabIcon = Icons.camera_enhance;
break;
case 3:
fabIcon = Icons.call;
break;
}
});
});

继续，

聊天界面

聊天屏幕有一个我们需要显示的消息列表。要创建消息列表，我们使用 ListView.builder() 并构造我们的项目。

让我们来看看聊天界面的列表项。

最外面的小部件是一行图标和另一行

第二行内部是一列，包含一行和一个文本小部件。

该行具有标题和消息日期。

让我们构建一个聊天项模型作为用于存储列表项详细信息的类。

class ChatItemModel {

String name;
String mostRecentMessage;
String messageDate;

ChatItemModel(this.name, this.mostRecentMessage, this.messageDate);

}

现在，为简洁起见，我省略了添加个人资料图片。

itemBuilder: (context, position) {
ChatItemModel chatItem = ChatHelper.getChatItem(position);

return Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Icon(
Icons.account_circle,
size: 64.0,
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
chatItem.name,
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 20.0),
),
Text(
chatItem.messageDate,
style: TextStyle(color: Colors.black45),
),
],
),
Padding(
padding: const EdgeInsets.only(top: 2.0),
child: Text(
chatItem.mostRecentMessage,
style: TextStyle(
color: Colors.black45, fontSize: 16.0),
),
)
],
),
),
)
],
),
),
Divider(),
],
ageDate,
style: TextStyle(color: Colors.black45),
),
],
),
Padding(
padding: const EdgeInsets.only(top: 2.0),
child: Text(
chatItem.mostRecentMessage,
style: TextStyle(
color: Colors.black45, fontSize: 16.0),
),
)
],
),
),
)
],
),
),
Divider(),
],