[英]Flutter: AppBar shape (rounded top corners with different background for toolbar and appbar)
I need to achieve something like this: AppBar - my target我需要实现这样的目标: AppBar - 我的目标
I tried using border radius我尝试使用边界半径
Widget build(BuildContext context) {
final _appBar = AppBar(
elevation: 6.0,
shape: ContinuousRectangleBorder(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(90.0),
),),
title: Text(listPagesNames[_cIndex]),
);
But it changed the left top corner at the level of the tool bar.但它改变了工具栏级别的左上角。 And not by much (even though I set radius at 90.0) Using border radius
而不是很多(即使我将半径设置为 90.0)使用边界半径
And I thought, well maybe I can change the size.我想,也许我可以改变大小。 Because I can change the background color of tool bar using services package:
因为我可以使用服务包更改工具栏的背景颜色:
import 'package:flutter/services.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: kMainRedPalette,
));
But using the size, the ApBar still 'starts' at the same place.但是使用大小,ApBar 仍然在同一个地方“开始”。
I thouht maybe something with offset (because I can already change the toolbar color), but I'm not sure how can I ofset appBar (and if it is possible at all).我认为可能有偏移量(因为我已经可以更改工具栏颜色),但我不确定如何偏移 appBar(如果可能的话)。 I'm new to dart, so any idea will be helpful :)
我是飞镖新手,所以任何想法都会有所帮助:)
Something like this??这种东西??
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() async {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.red,
));
runApp(MaterialApp(debugShowCheckedModeBanner: false, home: MyApp()));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: AppBar().preferredSize,
child: SafeArea(
child: Container(
color: Colors.red,
child: AppBar(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25.0),
topRight: Radius.circular(25.0)
)
),
elevation: 8,
backgroundColor: Colors.white,
leading: Icon(Icons.menu, color: Colors.black,),
),
),
),
),
body: Container(color: Colors.white,),
);
}
}
@Will Hlas answer solves my problem :) @Will Hlas 的回答解决了我的问题:)
If anyone will need to use "tapable" leading icon as eg drawer opener, remember to wrap Icon in IconButton widget and place it into another Builder (just like in code below; code based on Will's answer).如果有人需要使用“可点击”前导图标作为抽屉开启器,请记住将 Icon 包装在 IconButton 小部件中并将其放入另一个构建器(就像下面的代码;代码基于 Will 的答案)。
appBar: PreferredSize(
preferredSize: AppBar().preferredSize,
child: SafeArea(
child: Container(
color: Colors.red,
child: AppBar(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25.0),
topRight: Radius.circular(25.0),
),
),
elevation: 8,
backgroundColor: Colors.white,
leading: Builder(
builder: (context) => IconButton(
icon: Icon(
Icons.menu,
color: Colors.black,
),
onPressed: () {
Scaffold.of(context).openDrawer();
},
tooltip:
MaterialLocalizations.of(context).openAppDrawerTooltip,
),
),
title: Text('Text on AppBar',
style: TextStyle(color: Colors.black),
),
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.