`

flutter 给组件添加边框

 
阅读更多

 

 

给组件添加边框

 

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: '容器组件示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text('容器组件示例'),
        ),
        body: Center(
          //添加容器
          child: Container(
            width: 200.0,
            height: 200.0,
            //添加边框装饰效果
            decoration: BoxDecoration(
              color: Colors.white,
              //设置上下左右四个边框样式
              border: new Border.all(
                color: Colors.green,//边框颜色
                width: 8.0,//边框粗细
              ),
              borderRadius: const BorderRadius.all(const Radius.circular(8.0)),//边框的弧度
            ),
            child: Text(
              'Flutter',
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 28.0),
            ),
          ),
        ),
      ),
    );
  }
}

 

 

分享到:
评论

相关推荐

    Flutter Container组件、Text组件、图片组件Image 、本地图片、远程图片、图片剪切.zip

    Container是Flutter中最基础且常用的组件,它允许开发者对子组件进行布局、设置颜色、边框、阴影、大小等。通过使用BoxConstraints,你可以限制或指定Container的宽度和高度。此外,Container还可以通过decoration...

    Flutter自定义控件之图片裁剪框

    `CustomPaint`允许我们在Canvas上自由绘制,这对于实现自定义的图形,如裁剪框的边框和选择区域至关重要。我们需要创建一个`Painter`类,实现`paint`方法,该方法将在Canvas上进行绘制。同时,`Painter`类可以持有...

    Flutter 常用系列demo代码

    这个"Flutter常用系列demo代码"集合提供了多种基础和常用的Flutter组件示例,帮助开发者更好地理解和掌握Flutter的使用。 1. **List**: 在Flutter中,List是一种动态数据类型,用于存储可变长度的有序序列。在练习...

    flutter_demo1.zip

    这个过程涉及到了Flutter的几个核心知识点,包括对常用组件的熟练运用、动画机制的理解以及控件定位和尺寸的处理。以下是这些知识点的详细说明: ### Flutter 常用组件的使用 Flutter提供了丰富的内置组件,如`...

    Flutter CustomPainter实现半圆形饼图

    7. **使用自定义Painter**:在你的Flutter组件中,通过`CustomPaint` widget来使用`HalfPieChartPainter`,并传入数据和颜色。 以下是一个简单的代码示例: ```dart class HalfPieChartPainter extends ...

    flutter开发之组件大全

    以下是一些关键的Flutter组件及其用途: 1. **Container**: 这是最基础的组件,用于包裹其他组件,提供尺寸、颜色、边框、阴影等基本样式设置。 2. **Text**: 用于显示文本,支持字体、大小、颜色、对齐方式等多种...

    Flutter入门与实战:带有【添加】按钮的圆角输入框

    为了让这个组件更实用,我们可以添加一些额外的功能,如输入验证。在`TextField`中,可以设置`validator`属性来检查用户输入是否符合预期格式。例如,如果你需要用户输入数字,可以这样设置: ```dart TextField( ...

    Flutter实现容器组件、图片组件 的代码

    8. `constraints`:添加额外的约束条件给子组件。 9. `margin`:围绕在装饰和子组件之外的外部空白区域。 10. `transform`:使用Matrix4矩阵进行容器的变换操作,如旋转、缩放等。 11. `child`:Container内的子...

    Flutter课程仪表板UI开发

    在实际开发过程中,你还需要了解如何使用Flutter的布局系统,如`Row`、`Column`、`Stack`和`Flex`等,以及颜色、阴影和边框等视觉元素的控制。此外,掌握状态管理和导航机制(如`Navigator`和`Routes`)也至关重要,...

    史上最全的Flutter 隐式动画源代码

    `animated_physical_model_demo.dart` 使用 `AnimatedPhysicalModel` 创建具有动画边框和阴影效果的组件。这有助于增强组件的视觉反馈,尤其是在按钮和卡片等交互元素上。 `tween_animation_builder_demo.dart` ...

    Programming Flutter.pdf

    - **Container**:一个通用的容器组件,可以设置背景颜色、边框等属性。 - **Row** 和 **Column**:用于布局,分别按照水平方向和垂直方向排列子组件。 - **RaisedButton**:一个带有阴影效果的按钮。 - **ListView*...

    flutter_base_demo:flutter组件学习

    1. **Container**: 这是最基本的组件,用于设置大小、颜色、边框、阴影等属性,可以包含其他组件。 2. **Text**: 用于展示文本,支持字体样式、对齐方式、行间距等定制。 3. **Image**: 可以加载本地或网络图片,...

    针对Flutter的完全初学者让他们熟悉Flutter中的各种基本小部件

    本教程将通过20多个实际示例帮助你熟悉Flutter的基础组件,让你在JavaScript开发的基础上深入到Flutter的世界。 1. **基础小部件**: Flutter提供了丰富的内置小部件,如`Container`、`Text`、`Image`等,它们是...

    FlutterSwitch:为Flutter创建的自定义开关包

    为它提供自定义的高度和宽度,开关和切换框的边框,边框半径,颜色,切换框大小,显示“打开”和“关闭”文本的选项,并能够在切换框内添加图标。 演示版 影片版本: : 将此包用作库 将此添加到包的pubspec.yaml...

    Flutter学习Roadmap.pptx

    1. **环境搭建**:首先需要下载Flutter SDK并解压缩到指定位置,接着将`flutter/bin`路径添加到系统的PATH环境变量中。为了加速下载速度,建议设置国内的SDK镜像源。最后运行`flutter doctor`检查并安装缺少的组件。...

    Flutter高阶技术:如何实现自定义弹出菜单框

    本篇文章将深入探讨如何在Flutter中创建自定义弹出菜单框,包括它的设计原理、实现步骤以及相关组件的使用。 首先,我们要理解弹出菜单框的基本概念。它通常是在用户点击某个按钮或进行特定操作后,从屏幕边缘滑出...

    Flutter 总体架构.docx

    4. **容器控件**:Container组件用于包裹其他Widget,可以设置尺寸、颜色、边框、阴影等属性,还可以添加装饰(Decoration)和布局约束。 5. **tabBar**:TabBar组件用于创建标签页,可以在多个页面间切换,常与...

    适用于Android和iOS的Flutter插件支持裁剪图像.zip

    10. **与其他组件配合**:在Flutter应用中,`flutter_image_cropper`通常与其他组件(如图像选择器)结合使用,形成完整的图片处理流程,例如先使用`image_picker`插件让用户选择图片,再通过`flutter_image_cropper...

    一系列使用Flutter构建具有吸引力UI的登录屏幕

    通过设置inputDecoration属性,可以添加边框、占位符颜色等样式。 2. **自定义输入框** TextField组件允许我们自定义输入样式,如字体大小、颜色、输入类型(密码或文本)等。还可以设置验证规则,例如检查输入...

    一个新的Flutter包可以帮助您在应用程序中实现TicketWidget

    这个新的Flutter包是JavaScript开发和Flutter开发的结合,它提供了一种高效且灵活的方式来创建这样的组件。尽管Flutter主要使用Dart语言,但这个包巧妙地利用了JavaScript的某些优势,使得跨平台开发变得更加顺畅。 ...

Global site tag (gtag.js) - Google Analytics