Flutter_03_画一个按钮和一根线

本文主要是介绍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_画一个按钮和一根线的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！