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

gradient_coloured_buttons のカバー
パッケージ詳細v0.1.0

gradient_coloured_buttons

カスタマイズ可能なグラデーションカラー、寸法、およびボーダー半径を使用して、視覚的に魅力的なボタンを作成し、Flutter UIを強化します。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
29
いいね数
87
Pub ポイント
130

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

flutter pub add gradient_coloured_buttons

パッケージ概要

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

開発者が完全にカスタマイズ可能なグラデーションカラー、寸法、およびボーダー半径を使用して魅力的なボタンを作成できるFlutterパッケージです。滑らかな色の遷移とモダンな視覚的インパクトを提供することで、複数のプラットフォームでユーザーインターフェースを強化します。簡単に統合でき、ダイナミックなボタンデザインで目立たせたいアプリに最適です。Android、iOS、Web、macOS、Windows、Linuxなど、すべての主要なFlutterプラットフォームをサポートしています。

用途

  • 明るいボタンでアプリUIを強化
  • インタラクティブなコール・トゥ・アクション要素の作成
  • モダンなログインまたはサインアップ画面のデザイン
  • フォーム内の視覚フィードバックの向上
  • ダッシュボードにアート的な魅力を加える
  • 追加コードなしでボタンスタイルをカスタマイズする

主な機能

  • 完全にカスタマイズ可能なグラデーションカラー
  • 調整可能なボタンの寸法
  • 設定可能なボーダー半径
  • クロスプラットフォーム互換性
  • pub.dev を通じたシンプルな統合
  • 線形および放射状のグラデーションをサポート

適している対象

  • 視覚的な洗練を求めるUIデザイナー
  • 現代のFlutterアプリを開発する開発者
  • 魅力的なインタラクティブ要素を必要とするアプリ
  • 美学およびブランディングに焦点を当てたプロジェクト
  • 迅速なボタンカスタマイズを望むチーム

注意事項

  • アクセシビリティのための追加のスタイリングが必要になる場合があります
  • 複雑なレイアウトにおけるグラデーションのパフォーマンスへの影響
  • 制限された組み込みアニメーションオプション
  • 読みやすさのために、コントラストの高いテキストと併用するのが最適です
  • ミニマリズムデザインアプローチには向いていない

元の README

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

Gradient Button

A Flutter package that provides customizable buttons with gradient colors. Enhance your Flutter UI by easily creating buttons with smooth gradient backgrounds.

Features

  • Create buttons with gradient backgrounds using the GradientButton widget.
  • Customize button dimensions, border radius, and more.
  • Easy integration and usage within your Flutter projects.

Getting started

To use this package, add gradient_coloured_buttons as a dependency in your pubspec.yaml file:

dependencies:

gradient_coloured_buttons: ^0.0.7

Example

These are the properties that you can modify:

  • text

  • onPressed

  • gradientColors

  • width

  • height

  • borderRadius

  • textStyle

Usage

//HERE IS THE COMPLETE CODE ...

import 'package:flutter/material.dart';

//Import the package in your Dart file:

import 'package:gradient_coloured_buttons/gradient_coloured_buttons.dart';

void main() {
runApp(GradientButtons());
}

class GradientButtons extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Gradient Coloured button',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: GradientColouredButton(),
  );
}
}
class GradientColouredButton extends StatefulWidget {
const GradientColouredButton({Key? key}) : super(key: key);

@override
State<GradientColouredButton> createState() => _GradientColouredButtonState();
}

class _GradientColouredButtonState extends State<GradientColouredButton> {
@override
Widget build(BuildContext context) {
  return Scaffold(
    body:
    //      <---content STARTS here--->
    GradientButton(
            text: "Johnson Redonyx Silva",
            textStyle: const TextStyle(fontWeight: FontWeight.bold,fontSize: 15),
            gradientColors: const [Colors.red,Colors.black,Colors.brown],
            width: 200,
            height: 50,
            borderRadius: 30.0,
            onPressed: ()
            {
              print("GradientButton is Pressed");
            }
        ),
    //      <---content ENDS here--->
  );
}
}

Example Image

Example Image

Additional information

This package offers a straightforward solution to apply gradient colors to buttons, enabling you to enhance their visual appeal effortlessly and efficiently.

カテゴリー

ソースリポジトリ

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

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