import 'package:flutter/material.dart';
import 'dart:ui'; void main()=>runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
} class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
} class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin{
TabController _controller;
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
void initState() {
super.initState();
_controller = TabController(length: 3, vsync: this);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Run for better future'),
bottom:TabBar(
tabs: <Widget>[
Tab(icon: Icon(Icons.accessibility),),
Tab(icon: Icon(Icons.description),),
Tab(icon: Icon(Icons.accessibility_new),),
],
controller: _controller,
),
),
body: TabBarView(
controller: _controller,
children: <Widget>[
Center(
child: Text(
'Realize your value with your life',
style: TextStyle(
color: Colors.green,
fontWeight: FontWeight.bold,
fontSize: 26,
),
),
),
Center(
child: Text(
'Play hard work hard',
style: TextStyle(
color: Colors.green,
fontWeight: FontWeight.bold,
fontSize: 26,
),
),
),
Center(
child: Text(
'Magic of everthing is hope',
style: TextStyle(
color: Colors.green,
fontWeight: FontWeight.bold,
fontSize: 26,
),
),
),
],
),
);
}
}

appbar导航的更多相关文章

  1. Flutter布局--appbar导航栏和状态栏

    MaterialApp 先看下上图的具体用法:1. title:标题2. actions:表示右侧的按钮的动作3. leading:表示左侧的按钮的动作4. flexibleSpace:5. back ...

  2. Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航

    Flutter中如何实现沉浸式透明Statusbar状态栏效果? 如下图:状态栏是指android手机顶部显示手机状态信息的位置.android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色 ...

  3. 【Flutter】容器类组件之Scaffold、TabBar、底部导航

    前言 一个完整的路由页可能会包含导航栏.抽屉菜单(Drawer)以及底部Tab导航菜单等.Flutter Material组件库提供了一些现成的组件来减少开发任务.Scaffold是一个路由页的骨架, ...

  4. dart实例

    import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends S ...

  5. 07-容器类Widget

    容器类Widget 容器类Widget一般只是包装其子Widget,对其添加一些修饰(补白或背景色等).变换(旋转或剪裁等).或限制(大小等) Padding Padding可以给其子节点添加补白(填 ...

  6. Flutter 简介(事件、路由、异步请求)

    1. 前言 Flutter是一个由谷歌开发的开源移动应用软件开发工具包,用于为Android和iOS开发应用,同时也将是Google Fuchsia下开发应用的主要工具.其官方编程语言为Dart. 同 ...

  7. 背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar

    [源码下载] 背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar 作者:webabcd 介绍背水一战 Windows 10 之 控件(导航类) App ...

  8. 【Flutter学习】基本组件之AppBar顶部导航栏

    一,概述 AppBar 显示在app的顶部.AppBar包含5大部分,如下图: 二,构造函数及参数含义 构造函数 AppBar({ Key key, this.leading, //在标题前面显示的一 ...

  9. Flutter AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换

    Flutter AppBar 自定义顶部按钮图 标.颜色 属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用 的 logo;在其他界面通常显示为返回按钮 title 标题,通常显 ...

随机推荐

  1. 关于vue,webpack 中 “exports is not defined”报错

    vue项目npm run dev 后项目报错 : 提示 “exports is not defined”. 导致这个问题是因为balbel的配置文件.babelrc的问题: { "prese ...

  2. Python 模块管理

    导入新的模块 创建一个 calculate.py 文件 print('ok') def add(x,y): return x + y def sub(x,y): return x - y 再创建一个 ...

  3. sql server: Graphs, Trees, Hierarchies and Recursive Queries

    --------------------------------------------------------------------- -- Chapter 09 - Graphs, Trees, ...

  4. jquery获取标签名,获取id

    var elementId = $(this).attr("id"); var tagName = $(this)[0].tagName;

  5. 安卓开发_浅谈主配置文件(AndroidManifest.xml)

    AndroidManifest.xml本质:是整个应用的主配置清单文件包含:该应用的包名,版本号,组件,权限等信息作用:记录该应用的相关的配置信息 一.常用标签(1).全局篇(包名,版本信息)(2). ...

  6. TraceView工具的使用

    一.TraceView工具如何使用 TraceView有4种启动/关闭分析方式: (1) 第一种使用方法演示 1. 选择跟踪范围 在想要根据的代码片段之间使用以下两句代码 Debug.startMet ...

  7. 9.4、__del__、__doc__、__dict__、__module__、__getitem__、__setitem__、__delitem__、__str__、__repr__、__call__

    相关内容: __del__.__doc__.__dict__.__module__.__getitem__.__setitem__.__delitem__.__str__.__repr__.__cal ...

  8. LeetCode题解Maximum Binary Tree

    1.题目描述 2.分析 找出最大元素,然后分割数组调用. 3.代码 TreeNode* constructMaximumBinaryTree(vector<int>& nums) ...

  9. [20180122]列统计与直方图.txt

    [20180122]列统计与直方图.txt --//昨天看了https://jonathanlewis.wordpress.com/2018/01/18/column-stats/,提到分析metho ...

  10. [20171113]修改表结构删除列相关问题4.txt

    [20171113]修改表结构删除列相关问题4.txt --//连续写了3篇修改表结构删除列的相关问题,链接如下: http://blog.itpub.net/267265/viewspace-214 ...