本文主要是介绍Flutter_03_画一个按钮和一根线,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
import 'package:flutter/material.dart';
/// 一个按钮和一根线
class ButtonAndLine extends StatelessWidget {
const ButtonAndLine({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('一个按钮和一根线'),
),
body: Container(
padding: EdgeInsets.only(top: 10),
child: Column(
children: [
/// FractionallySizedBox 百分比布局
// 1、尺寸限制盒子
FractionallySizedBox(
widthFactor: 0.9,
// 2、装饰盒子
child: DecoratedBox(
decoration: BoxDecoration(
// 渐变
gradient: LinearGradient(
colors: [Colors.lightBlueAccent, Colors.blue],
),
// 圆角
borderRadius: BorderRadius.circular(6.0),
// 阴影
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2.0, 2.0),
blurRadius: 4.0)
],
),
// 3、材料设计的Button
child: MaterialButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6)),
height: 45,
onPressed: () => print("click btn"),
disabledColor: Colors.grey,
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
// color: Colors.deepOrange,
child: Text(
"登录",
style: TextStyle(color: Colors.white, fontSize: 16),
),
),
),
),
SizedBox(height: 10),
/// 绘制线条
Divider(
// height: 30,
color: Colors.lightBlueAccent,
indent: 10,
endIndent: 10,
// 线的厚度
thickness: 2,
),
],
),
),
);
}
}
这篇关于Flutter_03_画一个按钮和一根线的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!