Ein anpassbarer kreisförmiger Schieberegler für Flutter

Blog

Ein anpassbarer kreisförmiger Schieberegler für Flutter

Ein anpassbarer kreisförmiger Schieberegler für Flutter

flatter_circular_slider Ein anpassbarer kreisförmiger Schieberegler für Flutter.

Designmuster Webentwicklung

Installation

Hinzufügen

flutter_circular_slider : ^lastest_version

zu Ihrer pubspec.yaml und führen Sie aus

flutter packages get

im Stammverzeichnis Ihres Projekts.

Grundlegende Verwendung

Erstellen Sie ein neues Projekt mit dem Befehl

flutter create myapp

Bearbeiten Sie lib/main.dart wie folgt:

import 'package:flutter/material.dart'; import 'package:flutter_circular_slider/flutter_circular_slider.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.blueGrey, body: Center( child: Container(child: DoubleCircularSlider(100, 0, 20)), )); } }

Es gibt zwei verschiedene Möglichkeiten:

  • SingleCircularSlider: hat nur einen Handler und kann entweder durch Ziehen des Handlers oder einfach durch Klicken auf verschiedene Teile des Schiebereglers verschoben werden.
  • DoubleCircularSlider: hat zwei Handler und beide müssen durch Ziehen verschoben werden.

Basis-Schieberegler

Baumeister

Parameter Standard Beschreibung
Divisionen Die Anzahl der Abschnitte, in die der Kreis zur Auswahl unterteilt wird.
drin (Nur für DoubleCircularSlider) Der Anfangswert in der Auswahl. Muss größer als 0 und kleiner als Divisionen sein.
Ende (Nur für DoubleCircularSlider) Der Endwert in der Auswahl. Muss größer als 0 und kleiner als Divisionen sein.
Position (Nur für SingleCircularSlider) Die Auswahl. Muss größer als 0 und kleiner als Divisionen sein.
Höhe 220,0 Höhe der Leinwand, auf der der Schieberegler gerendert wird.
Breite 220,0 Breite der Leinwand, in der der Schieberegler gerendert wird.
Primärsektoren 0 Anzahl der im Grundkreis gemalten Sektoren. Gemalt in selectionColor.
sekundäre Sektoren 0 Anzahl der im Grundkreis gemalten Nebensektoren. In baseColor lackiert.
Kind Null Widget, das in die Mitte des kreisförmigen Schiebereglers eingefügt wird.
onSelectionChange void onSelectionChange (int init, int end, int laps) Wird jedes Mal ausgelöst, wenn der Benutzer mit dem Schieberegler interagiert und die Init- und Endwerte sowie Runden ändert.
onSelectionEnd void onSelectionEnd (int init, int end, int laps) Wird jedes Mal ausgelöst, wenn der Benutzer eine Interaktion mit dem Schieberegler beendet.
Grundfarbe Farbe.vonRGBO(255, 255, 255, 0.1) Die Farbe, die für die Basis des Kreises verwendet wird.
AuswahlFarbe Farbe.vonRGBO(255, 255, 255, 0,3) Die Farbe, die für die Auswahl im Kreis verwendet wird.
handlerColor Farben.weiß Die Farbe, die für die Handler verwendet wird.
handlerOuterRadius 12.0 Der Radius für den äußeren Kreis um den Handler.
ShowRoundedCapInSelection falsch (Nur für SingleCircularSlider) Zeigt eine abgerundete Kappe am Rand des Auswahlschiebereglers ohne Handler an.
zeigeHandlerOuter wahr Bei true wird ein zusätzlicher Ring um die Handler angezeigt.
sliderStrokeWidth 12.0 Die Strichbreite für den Schieberegler (Stärke).
sollteCountLaps falsch Bei true gibt onSelectionChange auch die aktualisierte Rundenzahl zurück.

Anwendungsfälle

Komplette Auswahl verschieben

Auswahl verschieben

Einzelhändler

Einzel-Schlaf-Slider

Kind

Schlafen Sie einzelne Slider-Runden

Javascript Json-Objekt erstellen

Sleep Double Slider Runden

Auswahl der Schlafzeit

import 'dart:mathe'; 'Paket: Flutter/material.dart' importieren; import 'Paket: Flutter_circular_slider/flatter_circular_slider.dart'; void main() => runApp(MyApp()); Klasse MyApp erweitert StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData(primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } class MyHomePage erweitert StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: Container( Dekoration: BoxDecoration( image: DecorationImage( image: AssetImage('images/background_morning.png'>   

Download-Details:

Autor: davidanaya

pub.dev https://pub.dartlang.org/packages/flutter_circular_slider

GitHub: https://github.com/davidanaya/flatter-circular-slider

#flattern #dart #programmierung