パッケージ、リポジトリ、アプリカテゴリを検索

ducafecatFlutter エコシステムナビ
パッケージ詳細v0.3.0

custom_rounded_rectangle_border

カスタムシェイプのボーダーを描画するためのシンプルなパッケージで、側面のレンダリング方法を完全に制御できます。

AndroidiOSWebmacOSWindowsLinux
pub.dev API ドキュメント ソースコード
30日間ダウンロード
7070
いいね数
23
Pub ポイント
150

パッケージをインストール

flutter pub add custom_rounded_rectangle_border

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

開発者が各辺のレンダリングを正確に制御できるカスタム形状のボーダーを作成できるFlutterパッケージです。標準的なラウンドドレクトルボーダーの機能を拡張し、各辺ごとにコーナー半径、ボーダー幅、ストロークスタイルを個別にカスタマイズできます。非対称またはカスタマイズされたボーダーエフェクトを持つユニークなUI要素のデザインに最適です。このパッケージはFlutterのデコレーションシステムにスムーズに統合され、すべての主要プラットフォームをサポートしています。

用途

  • 非対称なボーダー設計の作成
  • 個別のコーナー半径のカスタマイズ
  • ユニークなUIフレーム要素の設計
  • 応答性のある装飾用コンテナの構築
  • アニメーションされたボーダー効果の実装
  • スタイリッシュなボーダーによるビジュアル階層の強化

主な機能

  • 側面ごとの罫線カスタマイズ
  • 柔軟なコーナー半径コントロール
  • すべてのFlutterプラットフォームをサポート
  • BoxDecoration との簡単な統合
  • 高度なスタイリングに対応した拡張性
  • クロスプラットフォームの一貫性

適している対象

  • 創造的なボーダー選択肢を探しているUIデザイナー
  • カスタムウィジェットを構築する開発者
  • 独自の視覚的境界を必要とするアプリ
  • 高いデザイン忠実度のプロジェクト
  • マルチプラットフォームアプリ用にFlutterを使用するチーム
  • インタラクティブなUIコンポーネントのプロトタイピング

注意事項

  • Flutter ペイントシステムの理解が必要です
  • シンプルなレイアウトの複雑さを増す可能性がある
  • リストでの大量使用によるパフォーマンスへの影響
  • 基本的な使用方法以外のドキュメントは限られている
  • 再ビルドなしでランタイムでの枠線の変更を行うには適していない
  • 最適化されたウィジェットツリーと併用するのが最適

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

Custom rounded rectangle border

A simple package for drawing custom shape borders with full control on how you want the sides to be rendered.

It simply addresses an open Flutter issue where an error is thrown when you try to set a borderRadius and border at the same time, see open issue below: Support non-uniform Borders with a non-zero borderRadius

Sample Usage

Container(
    decoration: ShapeDecoration(
    shape: CustomRoundedRectangleBorder(
      borderRadius: BorderRadius.only(
          bottomLeft: 5.0,
          bottomRight: 5.0),
      leftSide: BorderSide(
          color: Colors.black),
      bottomLeftCornerSide: BorderSide(
          color: Colors.black),
      rightSide: BorderSide(
          color: Colors.black),
      bottomRightCornerSide: BorderSide(
          color: Colors.black),
      bottomSide: BorderSide(
          color: Colors.black),
    ),
),)

Flutter

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

カテゴリー

クリッパーと装飾

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。