颤动中的自定义圆形应用程序栏
Custom Rounded appbar in flutter
自定义应用栏截图:
我想制作一个像照片中那样的自定义应用栏
任何人都可以帮助我创建这个我已经搜索了很多但没有找到任何地方
诀窍是不要弯曲应用栏,而是弯曲底部容器。看看下面的代码,你就会明白了。
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final key = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF012B44),
key: key,
appBar: AppBar(
title: Text("OTP Verification"),
backgroundColor: Colors.transparent,
),
body: SingleChildScrollView(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
)
),
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"Welcome to the login page",
style: Theme.of(context).textTheme.display1,
),
TextField(
decoration: InputDecoration(hintText: "Name"),
),
FlatButton(
onPressed: () {
key.currentState.showSnackBar(SnackBar(
content:
Text("I won't say your name but stay home, stay safe!"),
));
},
child: Text("Say my name"))
],
),
),
),
);
}
}
我不认为它是一个圆角 appBar
而是它下面的一个圆角 container
。
我在Scaffold
中添加了backgroundColor
,与AppBar
的背景色相匹配。此外,我已将 AppBar
的 elevation
设置为 0 以防止阴影。
import 'package:flutter/material.dart';
class TempMyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Test App',
home: Scaffold(
backgroundColor: Colors.indigo.shade800,
appBar: AppBar(
title: Text(
'Test App',
),
elevation: 0,
backgroundColor: Colors.indigo.shade800,
),
body: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(60),
topRight: Radius.circular(60),
),
color: Colors.white,
),
),
),
);
}
}
自定义应用栏截图:
我想制作一个像照片中那样的自定义应用栏 任何人都可以帮助我创建这个我已经搜索了很多但没有找到任何地方
诀窍是不要弯曲应用栏,而是弯曲底部容器。看看下面的代码,你就会明白了。
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final key = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF012B44),
key: key,
appBar: AppBar(
title: Text("OTP Verification"),
backgroundColor: Colors.transparent,
),
body: SingleChildScrollView(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
)
),
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"Welcome to the login page",
style: Theme.of(context).textTheme.display1,
),
TextField(
decoration: InputDecoration(hintText: "Name"),
),
FlatButton(
onPressed: () {
key.currentState.showSnackBar(SnackBar(
content:
Text("I won't say your name but stay home, stay safe!"),
));
},
child: Text("Say my name"))
],
),
),
),
);
}
}
我不认为它是一个圆角 appBar
而是它下面的一个圆角 container
。
我在Scaffold
中添加了backgroundColor
,与AppBar
的背景色相匹配。此外,我已将 AppBar
的 elevation
设置为 0 以防止阴影。
import 'package:flutter/material.dart';
class TempMyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Test App',
home: Scaffold(
backgroundColor: Colors.indigo.shade800,
appBar: AppBar(
title: Text(
'Test App',
),
elevation: 0,
backgroundColor: Colors.indigo.shade800,
),
body: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(60),
topRight: Radius.circular(60),
),
color: Colors.white,
),
),
),
);
}
}