flutter,显示出appbar我就不多说了,就讲下我项目实战中让appbar显示指定的阴影部分,这里采用的是container容器进行包装显示
1.原生设计阴影;
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
home: new Scaffold(
body: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new AppBar(
title: new Text('Hello world'), //设置标题
elevation: 4.0, //设置阴影辐射范围
)
],
),
),
);
}
}
2.改造后,自定义阴影
1.将 elevation:阴影辐射范围设置为0.0,
2.使用Container容器进行包裹
import 'package:flutter/material.dart';
import 'package:flutter_demo/widget/AppBarWight.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
home: new Scaffold(
body: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
AppbarWig.hello_appbar(), //设计时内部不给范围
],
),
),
);
}
}
温馨提示: 两段代码间存在导包,及包目录问题,请自行创建
import 'package:flutter/material.dart';
class AppbarWig {
static Widget hello_appbar() => new Container(
child: new AppBar(
title: new Text('hello'),
centerTitle: true,
actions: <Widget>[
new Icon(Icons.add_circle),
],
leading: Icon(Icons.account_box),
elevation: 0,
),
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(color: Colors.red, blurRadius: 30.0)
],
),
);
}