android标题栏渐变简书,(11)、Study Flutter实战之自定义渐变标题栏

通过前面10篇文章的学习，我们已经对flutter的一些基本控件有一定的了解了。这篇文章尽量使用之前学习的知识，来实现一个我们常见的渐变标题栏。效果如下：

QQ截图20190112102103.png

首先创建一个基础项目。添加如下代码：

import 'dart:io';

import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

void main() {

runApp(HomePage());

//状态栏一体化

if (Platform.isAndroid) {

SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(

statusBarColor: Colors.transparent,

);

SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);

}

}

class HomePage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false, //不显示右上角Debug字样

home: Scaffold(

body:Text("提莫")

),

);

}

}

不用想这个时候，界面肯定是很丑的。由于我们需要自定义标题栏，所以就不使用AppBar了。我们自己定义一个渐变的标题栏widget，命名为GradientAppBar。由于我们APP可能不止一处用到该标题栏，所以标题我们通过构造方法传入。如下：

//自定义一个渐变的标题栏

class GradientAppBar extends StatelessWidget {

final String title; // 标题名称

final double barHeight = 60.0; //标题栏高度

GradientAppBar(this.title); //构造方法传入标题栏

@override

Widget build(BuildContext context) {

//todo

}

}

然后修改HomePage中body属性代码如下：

body: Column(

children: [

GradientAppBar("提莫"), //自定义渐变标题栏

],

),

我们可以通过MediaQuery对象获取到状态栏的高度:

//获取系统状态栏高度

final double statusBarHeight = MediaQuery.of(context).padding.top;

至于build方法中我们返回一个Container widget，Container widget很多时候，都适用于这种。代码如下：

@override

Widget build(BuildContext context) {

//获取系统状态栏高度

final double statusBarHeight = MediaQuery.of(context).padding.top;

return Container(

padding: EdgeInsets.only(top: statusBarHeight),

height: barHeight + statusBarHeight,

child: Center(

child: Text(

title,

style: const TextStyle(

color: Colors.blue,

fontSize: 30.0,

fontWeight: FontWeight.w400, //字体宽度。

),

),

),

);

}

这个时候运行，效果如下：

QQ截图20190112103425.png

标题已经实现居中了，这个时候来实现背景。通过前面的学习，我们知道Container中有一个decoration装饰容器的属性。这儿我们需要用到它。

decoration: BoxDecoration(

gradient: LinearGradient(

colors: [

const Color(0xFF3366FF),

const Color(0xFF00CCFF),

]

),

),

最终效果：

QQ截图20190112102103.png

小知识点

/** 获取屏幕宽度 */

static double getScreenWidth(BuildContext context) {

return MediaQuery.of(context).size.width;

}

/** 获取屏幕高度 */

static double getScreenHeight(BuildContext context) {

return MediaQuery.of(context).size.height;

}

/** 获取系统状态栏高度 */

static double getSysStatsHeight(BuildContext context) {

return MediaQuery.of(context).padding.top;

}

完整代码

import 'dart:io';

import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

void main() {

runApp(HomePage());

//状态栏一体化

if (Platform.isAndroid) {

SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(

statusBarColor: Colors.transparent,

);

SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);

}

}

class HomePage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false, //不显示右上角Debug字样

home: Scaffold(

body: Column(

children: [

GradientAppBar("提莫"), //自定义渐变标题栏

],

),

),

);

}

}

//自定义一个渐变的标题栏

class GradientAppBar extends StatelessWidget {

final String title; // 标题名称

final double barHeight = 60.0; //标题栏高度

GradientAppBar(this.title);

@override

Widget build(BuildContext context) {

//获取系统状态栏高度

final double statusBarHeight = MediaQuery.of(context).padding.top;

return Container(

padding: EdgeInsets.only(top: statusBarHeight),

height: barHeight + statusBarHeight,

decoration: BoxDecoration(

gradient: LinearGradient(

colors: [

const Color(0xFF3366FF),

const Color(0xFF00CCFF),

]

),

),

child: Center(

child: Text(

title,

style: const TextStyle(

color: Colors.white,

fontSize: 30.0,

fontWeight: FontWeight.w400, //字体宽度。

),

),

),

);

}

}