Wie erstelle ich eine Kreissymbolschaltfläche in Flutter?

82

Ich kann kein Beispiel finden, das zeigt, wie man einen Kreis IconButtonähnlich dem erstellt FloatingActionButton. Kann jemand vorschlagen, wie / was benötigt wird, um eine benutzerdefinierte Schaltfläche wie die zu erstellen FloatingActionButton?

Edmand Looi
quelle

Antworten:

183

RawMaterialButton ist meiner Meinung nach besser geeignet.

RawMaterialButton(
  onPressed: () {},
  elevation: 2.0,
  fillColor: Colors.white,
  child: Icon(
    Icons.pause,
    size: 35.0,
  ),
  padding: EdgeInsets.all(15.0),
  shape: CircleBorder(),
)
UpaJah
quelle
Obwohl FloatingActionButton ebenfalls eine Option ist, ist dies definitiv der bessere Ansatz.
U-
10
Ich bekomme mit diesem Ansatz eine große horizontale Polsterung und kann sie nicht entfernen, egal was ich versuche. Irgendwelche Ideen?
Rod
4
Ich habe dieses Problem mithilfe der Constraints-Eigenschaft von RawMaterialButton-Constraints gelöst: BoxConstraints (minWidth: 36.0, maxWidth: 36.0, minHeight: 36.0, maxHeight: 36.0). Es ist wahrscheinlich nicht die beste Lösung, aber es hat funktioniert.
Mualki
2
Um die Polsterung um die Schaltfläche vollständig zu entfernen, fügen materialTapTargetSize: MaterialTapTargetSize.shrinkWrap
Sie
1
Um die Polsterung zu entfernen, fügte ich hinzu:constraints: BoxConstraints.expand(width: 42, height: 42),
Leonardo
72

Sie können dies versuchen, es ist vollständig anpassbar.

ClipOval(
  child: Material(
    color: Colors.blue, // button color
    child: InkWell(
      splashColor: Colors.red, // inkwell color
      child: SizedBox(width: 56, height: 56, child: Icon(Icons.menu)),
      onTap: () {},
    ),
  ),
)

Ausgabe:

Geben Sie hier die Bildbeschreibung ein

CopsOnRoad
quelle
1
Vielen Dank für diese Antwort @CopsOnRoad
Jason Waku
26

Sie müssen nur die Form verwenden: CircleBorder()

MaterialButton(
  onPressed: () {},
  color: Colors.blue,
  textColor: Colors.white,
  child: Icon(
    Icons.camera_alt,
    size: 24,
  ),
  padding: EdgeInsets.all(16),
  shape: CircleBorder(),
)

Geben Sie hier die Bildbeschreibung ein

RodolfoSilva
quelle
20

Sie können dazu InkWell verwenden:

Ein rechteckiger Bereich eines Materials, der auf Berührungen reagiert.

Das folgende Beispiel zeigt die Verwendung InkWell. Hinweis: Das müssen Sie nicht StatefulWidgettun. Ich habe es benutzt, um den Status der Zählung zu ändern.

Beispiel:

import 'package:flutter/material.dart';

class SettingPage extends StatefulWidget {
  @override
  _SettingPageState createState() => new _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new InkWell(// this is the one you are looking for..........
        onTap: () => setState(() => _count++),
        child: new Container(
          //width: 50.0,
          //height: 50.0,
          padding: const EdgeInsets.all(20.0),//I used some padding without fixed width and height
          decoration: new BoxDecoration(
            shape: BoxShape.circle,// You can use like this way or like the below line
            //borderRadius: new BorderRadius.circular(30.0),
            color: Colors.green,
          ),
          child: new Text(_count.toString(), style: new TextStyle(color: Colors.white, fontSize: 50.0)),// You can add a Icon instead of text also, like below.
          //child: new Icon(Icons.arrow_forward, size: 50.0, color: Colors.black38)),
        ),//............
      ),
      ),
    );
  }
}

Wenn Sie bekommen Vorteil wollen splashColor, highlightColorwickeln InkWellWidget unter Verwendung eines MaterialWidget mit Materialart Kreis. Und dann decorationim ContainerWidget entfernen .

Ergebnis:

Geben Sie hier die Bildbeschreibung ein

Blasanka
quelle
Blassanka, danke für die Information. Am Ende habe ich stattdessen den FloatingActionButton verwendet. Ihre Lösung wird sich jedoch in Zukunft für andere Szenarien als nützlich erweisen.
Edmand Looi
1
Dieser Code erstellt (nicht mehr) eine "Kreis" -Schaltfläche.
Loolooii
10

Sie können ganz einfach Folgendes tun:

FlatButton(
      onPressed: () {

       },
      child: new Icon(
        Icons.arrow_forward,
        color: Colors.white,
        size: 20.0,
      ),
      shape: new CircleBorder(),
      color: Colors.black12,
    )

Das Ergebnis istGeben Sie hier die Bildbeschreibung ein

Doan Bui
quelle
8
RawMaterialButton(
  onPressed: () {},
  constraints: BoxConstraints(),
  elevation: 2.0,
  fillColor: Colors.white,
  child: Icon(
    Icons.pause,
    size: 35.0,
  ),
  padding: EdgeInsets.all(15.0),
  shape: CircleBorder(),
)

notieren Sie sich constraints: BoxConstraints(), es ist dafür gedacht, dass das Auffüllen links nicht erlaubt ist.

Viel Spaß beim Flattern !!

John
quelle
7

Wenn Sie ein Hintergrundbild benötigen, können Sie CircleAvatar mit IconButton verwenden. Legen Sie die Eigenschaft backgroundImage fest.

CircleAvatar(
  backgroundImage: NetworkImage(userAvatarUrl),
)

Beispiel mit Schaltfläche:

        CircleAvatar(
          backgroundColor: Colors.blue,
          radius: 20,
          child: IconButton(
            padding: EdgeInsets.zero,
            icon: Icon(Icons.add),
            color: Colors.white,
            onPressed: () {},
          ),
        ),

Geben Sie hier die Bildbeschreibung ein

Live-Liebe
quelle
4

Es gibt tatsächlich ein Beispiel, wie ein Kreis-IconButton ähnlich dem FloatingActionButton erstellt wird.

Ink(
    decoration: const ShapeDecoration(
        color: Colors.lightBlue,
        shape: CircleBorder(),
    ),
    child: IconButton(
        icon: Icon(Icons.home),
        onPressed: () {},
    ),
)

Führen Sie Folgendes aus, um ein lokales Projekt mit diesem Codebeispiel zu erstellen:

flutter create --sample=material.IconButton.2 mysample
Taiyr Begeyev
quelle
2

Mein Beitrag:

import 'package:flutter/material.dart';

///
/// Create a circle button with an icon.
///
/// The [icon] argument must not be null.
///
class CircleButton extends StatelessWidget {
  const CircleButton({
    Key key,
    @required this.icon,
    this.padding = const EdgeInsets.all(8.0),
    this.color,
    this.onPressed,
    this.splashColor,
  })  : assert(icon != null),
        super(key: key);

  /// The [Icon] contained ny the circle button.
  final Icon icon;

  /// Empty space to inscribe inside the circle button. The [icon] is
  /// placed inside this padding.
  final EdgeInsetsGeometry padding;

  /// The color to fill in the background of the circle button.
  ///
  /// The [color] is drawn under the [icon].
  final Color color;

  /// The callback that is called when the button is tapped or otherwise activated.
  ///
  /// If this callback is null, then the button will be disabled.
  final void Function() onPressed;

  /// The splash color of the button's [InkWell].
  ///
  /// The ink splash indicates that the button has been touched. It
  /// appears on top of the button's child and spreads in an expanding
  /// circle beginning where the touch occurred.
  ///
  /// The default splash color is the current theme's splash color,
  /// [ThemeData.splashColor].
  final Color splashColor;

  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);

    return ClipOval(
      child: Material(
        type: MaterialType.button,
        color: color ?? theme.buttonColor,
        child: InkWell(
          splashColor: splashColor ?? theme.splashColor,
          child: Padding(
            padding: padding,
            child: icon,
          ),
          onTap: onPressed,
        ),
      ),
    );
  }
}
Carlos Schwarz
quelle
2

Mit diesem Code können Sie Schaltflächen ohne unerwünschte Polsterung hinzufügen.

RawMaterialButton(
      elevation: 0.0,
      child: Icon(Icons.add),
      onPressed: (){},
      constraints: BoxConstraints.tightFor(
        width: 56.0,
        height: 56.0,
      ),
      shape: CircleBorder(),
      fillColor: Color(0xFF4C4F5E),
    ),
Akhil
quelle
2

Ich habe eine Version mit korrektem Ausschnitt, Höhe und Rand erstellt. Fühlen Sie sich frei, es anzupassen.

Material(
    elevation: 2.0,
    clipBehavior: Clip.hardEdge,
    borderRadius: BorderRadius.circular(50),
    color: Colors.white,
    child: InkWell(
        onTap: () => null,
        child: Container(
            padding: EdgeInsets.all(9.0),
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: Border.all(color: Colors.blue, width: 1.4)),
           child: Icon(
                Icons.menu,
                size: 22,
                color: Colors.red,
            ),
        ),
    ),
)),
Rodrigo Boratto
quelle
1

Sie können auch einen RaisedButton mit einem Bild darin verwenden (z. B. für die soziale Anmeldung) wie dieses (Sizebox mit Fittebox ist erforderlich, um das Bild auf die angegebene Größe zu beschränken):

FittedBox(
    fit: BoxFit.scaleDown,
    child: SizedBox(
        height: 60,
        width: 60,
        child: RaisedButton(
             child: Image.asset(
                 'assets/images/google_logo.png'),
                 shape: StadiumBorder(),
                 color: Colors.white,
                     onPressed: () {},
                 ),
             ),
         ),
Daniel Vilela
quelle
1

Ich habe dieses verwendet, weil mir die Anpassung des Rahmenradius und der Größe gefällt.

  Material( // pause button (round)
    borderRadius: BorderRadius.circular(50), // change radius size
    color: Colors.blue, //button colour
    child: InkWell(
      splashColor: Colors.blue[900], // inkwell onPress colour
      child: SizedBox(
        width: 35,height: 35, //customisable size of 'button'
        child: Icon(Icons.pause,color: Colors.white,size: 16,),
      ),
      onTap: () {}, // or use onPressed: () {}
    ),
  ),

  Material( // eye button (customised radius)
    borderRadius: BorderRadius.only(
        topRight: Radius.circular(10.0),
        bottomLeft: Radius.circular(50.0),),
    color: Colors.blue,
    child: InkWell(
      splashColor: Colors.blue[900], // inkwell onPress colour
      child: SizedBox(
        width: 40, height: 40, //customisable size of 'button'
        child: Icon(Icons.remove_red_eye,color: Colors.white,size: 16,),),
      onTap: () {}, // or use onPressed: () {}
    ),
  ),

Geben Sie hier die Bildbeschreibung ein

Yachthafen
quelle
1
ClipOval(
      child: MaterialButton( 
      color: Colors.purple,
      padding: EdgeInsets.all(25.0),
      onPressed: () {},
      shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(30.0)),
            child: Text(
                      '1',
                      style: TextStyle(fontSize: 30.0),
                    ),
                  ),
                ),
Manish Upadhyay
quelle
1

Nicht materielle Lösung:

final double floatingButtonSize = 60;
final IconData floatingButtonIcon;

TouchableOpacity(
  onTap: () {
     /// Do something...
  },
  activeOpacity: 0.7,
  child: Container(
    height: floatingButtonSize,
    width: floatingButtonSize,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(floatingButtonSize / 2),
      color: Theme.of(context).primaryColor,
      boxShadow: [
        BoxShadow(
          blurRadius: 25,
          color: Colors.black.withOpacity(0.2),
          offset: Offset(0, 10),
        )
      ],
    ),
    child: Icon(
      floatingButtonIcon ?? Icons.add,
      color: Colors.white,
    ),
  ),
)

Sie können GestureDetector anstelle der TouchableOpacity-Bibliothek verwenden.

Ilya Iksent
quelle
0

Probieren Sie diese Karte aus

Card(
    elevation: 10,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(25.0), // half of height and width of Image
      ),
    child: Image.asset(
      "assets/images/home.png",
      width: 50,
      height: 50,
    ),
  )
Harshal Pathak
quelle