首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在flutter中拥有像这样的圆形呢?

如何在flutter中拥有像这样的圆形呢?
EN

Stack Overflow用户
提问于 2019-06-17 15:43:14
回答 2查看 11.7K关注 0票数 6

我正在尝试在我的flutter项目中有一个像这样的圆形。我尝试在容器中使用边界半径。但它并没有像我预期的那样工作。

那么,我怎么才能有一个像这样的形状呢?

我试着使用这样的容器。

代码语言:javascript
复制
    Container(
            height: 72,
            width: 211,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(50),
                topLeft: Radius.circular(30))
            ),
          )
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-18 07:04:42

您可以使用CustomPaint绘制几乎任何内容,请看一下:

https://api.flutter.dev/flutter/rendering/CustomPainter-class.html

在下面的代码中,我画了一个类似于这个圆的东西:

代码语言:javascript
复制
import "package:flutter/material.dart";

void main() {
  runApp(MaterialApp(title: "", home: Home()));
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Container(
            width: double.infinity,
            height: double.infinity,
            child: CustomPaint(
              painter: CirclePainter(),
            )),
      ),
    );
  }
}

class CirclePainter extends CustomPainter {
  final Paint lightBluePaint = Paint()..color = Color(0xFFbde5fa);
  final Paint bluePaint = Paint()..color = Color(0xFF5abef2);
  final TextPainter textPainter = TextPainter(
    textDirection: TextDirection.ltr,
  );

  final TextStyle textStyle = TextStyle(
      color: Colors.white.withAlpha(240),
      fontSize: 18,
      letterSpacing: 1.2,
      fontWeight: FontWeight.w900);

  @override
  void paint(Canvas canvas, Size size) {
    var rect = Rect.fromLTRB(
        -100, size.height - 120, size.width * 0.7, size.height + 250);

    final Path circle = Path()..addOval(rect);
    final Path smallCircle = Path()..addOval(rect.inflate(50));

    canvas.drawPath(smallCircle, lightBluePaint);
    canvas.drawPath(circle, bluePaint);

    drawText(canvas, size, 'Write now');
  }

  void drawText(Canvas canvas, Size size, String text) {
    textPainter.text = TextSpan(style: textStyle, text: text);
    textPainter.layout();
    textPainter.paint(canvas, Offset(50, size.height - 60));
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}
票数 6
EN

Stack Overflow用户

发布于 2019-06-17 17:41:34

要实现图像预览,您需要使用带有Positioned元素的Stack类。我做了一个小工具,如你的图片所示。圆角上的圆可以用具有边界半径的容器来制作。

代码语言:javascript
复制
  Container(
    width: MediaQuery.of(context).size.width,
    height: 250,
    margin: EdgeInsets.all(20),
    decoration: BoxDecoration(
      color: Colors.white,
      boxShadow: <BoxShadow>[
        BoxShadow(
          color: Color(0x40000000),
          blurRadius: 5.0,
          spreadRadius: 0.0,
          offset: Offset(0.0, 2.0),
        ),
      ],
    ),
    child: Stack(
      children: <Widget>[
        Container(
          padding: EdgeInsets.all(15.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                'Step 3',
                style: TextStyle(
                  color: Colors.blue,
                ),
              ),
              SizedBox(height: 5),
              Text(
                'It is a long established fact that a reader will be '
                  'distracted by the readable content of a page when '
                  'looking at its layout.',
                style: TextStyle(
                  color: Colors.black54,
                ),
              )
            ],
          ),
        ),
        Positioned(
          top: 150,
          right: MediaQuery.of(context).size.width - 200,
          child: Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              color: Color(0xFFB5E1F9),
              borderRadius: BorderRadius.all(
                Radius.circular(200),
              ),
            ),
            child: Center(
              child: Container(
                width: 150,
                height: 150,
                decoration: BoxDecoration(
                  color: Color(0xFF4FB6F0),
                  borderRadius: BorderRadius.all(
                    Radius.circular(150),
                  ),
                ),
              ),
            ),
          ),
        ),
        Positioned(
          bottom: 30,
          left: 30,
          child: Text(
            'Write now',
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
      ],
    ),
  );
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56626824

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档