Neumorphicウィジェットを同心円のFlutterに配置するにはどうすればよいですか?

シムラン・アスワニ

flutter_neumorphics依存関係https://pub.dev/packages/flutter_neumorphic使用して、円形のNeumorphicコンテナーを作成しています。ただし、サイズを変更しようとすると問題が発生します。外側の円を小さく、コンパクトにしたいと思います。これが私が試したコードです:

  Widget build(BuildContext context) {
    final percentage = 50.0;
    return Stack(
      children: <Widget>[
        Align(
          child: Neumorphic(
            boxShape: NeumorphicBoxShape.circle(),
            padding: EdgeInsets.all(80),
            style: NeumorphicStyle(
              depth: NeumorphicTheme.embossDepth(context),
            ),
          child: CustomPaint(
            painter: NeuProgressPainter(
              circleWidth: 20,
              completedPercentage: percentage,
              defaultCircleColor: Colors.transparent,
            ),
            child: Center(),
          ),
        ),
        ),
        Align(
          child: Neumorphic(
            boxShape: NeumorphicBoxShape.circle(),
            padding: EdgeInsets.all(80),
            style: NeumorphicStyle(
              color: Colors.white,
              depth: NeumorphicTheme.depth(context),
            ),

          ),
        ),

      ],
    );
  }

どこNeuProgressPainterのように定義されます。

class NeuProgressPainter extends CustomPainter {
  //
  Color defaultCircleColor;
  Color percentageCompletedCircleColor;
  double completedPercentage;
  double circleWidth;

  NeuProgressPainter(
      {this.defaultCircleColor,
      this.percentageCompletedCircleColor,
      this.completedPercentage,
      this.circleWidth});

  getPaint(Color color) {
    return Paint()
      ..color = color
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = circleWidth;
  }

  @override
  void paint(Canvas canvas, Size size) {
    Paint defaultCirclePaint = getPaint(defaultCircleColor);

    Offset center = Offset(size.width / 2, size.height / 2);
    double radius = min(size.width / 2, size.height / 2);
    Rect boundingSquare = Rect.fromCircle(center: center, radius: radius);

    paint(
      List<Color> colors,
    ) {
      final Gradient gradient = LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomRight,
        colors: colors,
      );

      return Paint()
        ..strokeCap = StrokeCap.round
        ..style = PaintingStyle.stroke
        ..strokeWidth = circleWidth
        ..shader = gradient.createShader(boundingSquare);
    }

    canvas.drawCircle(center, radius, defaultCirclePaint);

    double arcAngle = 2 * pi * (completedPercentage / 100);
    canvas.drawArc(
      Rect.fromCircle(center: center, radius: radius),
      -pi / 2,
      arcAngle,
      false,
      paint(
        [
        kcolor,
          kDarkOrange,
          kOrange,
        ],
      ),
    );
  }

  @override
  bool shouldRepaint(CustomPainter painter) {
    return true;
  }
}

これは私の出力がどのように見えるかです: ここに画像の説明を入力してください

私はこのインスピレーションに似た何かを達成しようとしています: ここに画像の説明を入力してください

ゆうウッズ

これはどう?

Padding(
  padding: const EdgeInsets.all(80.0),
  child: Align(
    child: Neumorphic(
      boxShape: NeumorphicBoxShape.circle(),
      padding: EdgeInsets.all(20),
      style: NeumorphicStyle(
        depth: NeumorphicTheme.embossDepth(context),
      ),
      child: CustomPaint(
        painter: NeuProgressPainter(
          circleWidth: 20,
          completedPercentage: percentage,
          defaultCircleColor: Colors.transparent,
        ),
        child: Center(),
      ),
    ),
  ),
),

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Flutterでウィジェットを別のウィジェットの上に配置するにはどうすればよいですか?

分類Dev

Flutterの列にウィジェットを動的に追加するにはどうすればよいですか?

分類Dev

FlutterのListViewにDismissibleウィジェットを追加するにはどうすればよいですか?

分類Dev

BoxLayoutでkivyウィジェットを他のウィジェットと比較して中央に配置するにはどうすればよいですか?

分類Dev

tkinterウィジェットを既存のウィジェットの下に配置するにはどうすればよいですか?

分類Dev

ウィジェットをキャンバスに配置するにはどうすればよいですか?

分類Dev

Dijit Selectウィジェットを中央に配置するにはどうすればよいですか?

分類Dev

円オブジェクトの上に画像を配置するにはどうすればよいですか?

分類Dev

Flutterで1つのウィジェットを画面の上部に配置し、別のウィジェットを画面の中央に配置するにはどうすればよいですか?

分類Dev

ウィジェットのリストをラップするにはどうすればよいですか?

分類Dev

QCamera を他のウィジェットとレイアウトに配置するにはどうすればよいですか?

分類Dev

appBarLayoutの上にCardViewウィジェットを設定するにはどうすればよいですか?

分類Dev

ListViewの上部にウィジェットを挿入するにはどうすればよいですか?

分類Dev

ウィジェットを特定の場所に移動するにはどうすればよいですか?

分類Dev

複数のonclickpendingintentsをウィジェットに設定するにはどうすればよいですか?

分類Dev

注目製品ウィジェットのホームページのコンテンツを中央に配置するにはどうすればよいですか

分類Dev

SplitLayoutPanelで中央ウィジェットの「setWidgetSize」を設定するにはどうすればよいですか?

分類Dev

プログラムで色を変更できるAndroidで円形ウィジェットを作成するにはどうすればよいですか?

分類Dev

PageViewウィジェットのFloatingActionButtonの色を変更するにはどうすればよいですか?

分類Dev

FlutterのDismissibleウィジェットで左または右へのスワイプを無効にするにはどうすればよいですか?

分類Dev

QGraphicsSceneのウィジェット(QGraphicsProxyWidget)を取得するにはどうすればよいですか?

分類Dev

ウィジェットの高さを取得するにはどうすればよいですか?

分類Dev

tkinterを使用して複数のウィジェットを1行に並べて配置するにはどうすればよいですか?

分類Dev

FlutterのすべてのデバイスでウィジェットをMediaQueryに合わせるにはどうすればよいですか?

分類Dev

Flutterのスタック内のウィジェットの内側の境界線を削除するにはどうすればよいですか?

分類Dev

2つのウィジェットを同じ行に配置するにはどうすればよいですか?

分類Dev

プレゼンターウィジェットを分割点の後ろに配置するにはどうすればよいですか?

分類Dev

Kivyでウィジェットをすぐに更新するにはどうすればよいですか?

分類Dev

親がFlutterで許可するようにウィジェットを小さくするにはどうすればよいですか?

Related 関連記事

  1. 1

    Flutterでウィジェットを別のウィジェットの上に配置するにはどうすればよいですか?

  2. 2

    Flutterの列にウィジェットを動的に追加するにはどうすればよいですか?

  3. 3

    FlutterのListViewにDismissibleウィジェットを追加するにはどうすればよいですか?

  4. 4

    BoxLayoutでkivyウィジェットを他のウィジェットと比較して中央に配置するにはどうすればよいですか?

  5. 5

    tkinterウィジェットを既存のウィジェットの下に配置するにはどうすればよいですか?

  6. 6

    ウィジェットをキャンバスに配置するにはどうすればよいですか?

  7. 7

    Dijit Selectウィジェットを中央に配置するにはどうすればよいですか?

  8. 8

    円オブジェクトの上に画像を配置するにはどうすればよいですか?

  9. 9

    Flutterで1つのウィジェットを画面の上部に配置し、別のウィジェットを画面の中央に配置するにはどうすればよいですか?

  10. 10

    ウィジェットのリストをラップするにはどうすればよいですか?

  11. 11

    QCamera を他のウィジェットとレイアウトに配置するにはどうすればよいですか?

  12. 12

    appBarLayoutの上にCardViewウィジェットを設定するにはどうすればよいですか?

  13. 13

    ListViewの上部にウィジェットを挿入するにはどうすればよいですか?

  14. 14

    ウィジェットを特定の場所に移動するにはどうすればよいですか?

  15. 15

    複数のonclickpendingintentsをウィジェットに設定するにはどうすればよいですか?

  16. 16

    注目製品ウィジェットのホームページのコンテンツを中央に配置するにはどうすればよいですか

  17. 17

    SplitLayoutPanelで中央ウィジェットの「setWidgetSize」を設定するにはどうすればよいですか?

  18. 18

    プログラムで色を変更できるAndroidで円形ウィジェットを作成するにはどうすればよいですか?

  19. 19

    PageViewウィジェットのFloatingActionButtonの色を変更するにはどうすればよいですか?

  20. 20

    FlutterのDismissibleウィジェットで左または右へのスワイプを無効にするにはどうすればよいですか?

  21. 21

    QGraphicsSceneのウィジェット(QGraphicsProxyWidget)を取得するにはどうすればよいですか?

  22. 22

    ウィジェットの高さを取得するにはどうすればよいですか?

  23. 23

    tkinterを使用して複数のウィジェットを1行に並べて配置するにはどうすればよいですか?

  24. 24

    FlutterのすべてのデバイスでウィジェットをMediaQueryに合わせるにはどうすればよいですか?

  25. 25

    Flutterのスタック内のウィジェットの内側の境界線を削除するにはどうすればよいですか?

  26. 26

    2つのウィジェットを同じ行に配置するにはどうすればよいですか?

  27. 27

    プレゼンターウィジェットを分割点の後ろに配置するにはどうすればよいですか?

  28. 28

    Kivyでウィジェットをすぐに更新するにはどうすればよいですか?

  29. 29

    親がFlutterで許可するようにウィジェットを小さくするにはどうすればよいですか?

ホットタグ

アーカイブ