Flutter学习笔记-使用decoration对Container装饰边框gradient颜色渐变

最新推荐文章于 2024-02-29 10:18:33 发布

yyxgs

最新推荐文章于 2024-02-29 10:18:33 发布

阅读量1.6k

点赞数

分类专栏： Flutter

本文链接：https://blog.csdn.net/yyxgs/article/details/116561875

版权

Flutter 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget
{
    Widget build(BuildContext context)
    {
        return MaterialApp
        (
            title: "flutter Demo",
            theme: ThemeData
            (
                primarySwatch: Colors.deepOrange,
            ),

            home: Scaffold
            (
                appBar: AppBar
                (
                    title: Text("这是APP的标题"),
                ),

                body: Container
                (
                    margin: EdgeInsets.only(left: 50, top: 50, right: 50),
                    padding: EdgeInsets.only(left: 12, top: 12),
                    child: Text("Do you like C++?"),
                    width: 200,
                    height: 200,
                    
                    // color: Colors.blue,

                    decoration: BoxDecoration
                    (
                        color: Colors.blue,
                        border: Border.all
                        (
                            color: Colors.yellow,
                            width: 5
                        ),

                        // 圆角边框
                        borderRadius: BorderRadius.circular(18),
                        gradient: LinearGradient
                        (
                            // 渐变的位置(从左上角到右下角)
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,

                            colors: 
                            [
                                Colors.greenAccent,
                                Colors.orange
                            ]
                        ),
                    ),
                ),
            ),
        );
    }
}