it-swarm.com.de

Runde Taste mit Text und Symbol im Flattern

wie bekomme ich einen Button mit Text und Symbol für die _flutter?

Ich wollte eine button, die wie ein Symbol aussieht und einen Text enthält, der sich am unteren Rand des Bildschirms befindet

Zum Beispiel ist das Symbol wie hier: Android-Schaltfläche-mit-Symbol-und-Text

 enter image description here

4
Daniel Mana

Sie können benannte Konstruktoren einfach zum Erstellen verschiedener Schaltflächentypen mit Symbolen verwenden. Zum Beispiel

FlatButton.icon(onPressed: null, icon: null, label: null);
RaisedButton.icon(onPressed: null, icon: null, label: null);

Wenn Sie jedoch spezielle Anforderungen haben, können Sie jederzeit benutzerdefinierte Schaltflächen mit unterschiedlichen Layouts erstellen oder einfach ein Widget in GestureDetector einbetten.

9
ap14

Sie können dies erreichen, indem Sie eine FlatButton verwenden, die eine Column (zum Anzeigen eines Textes unter dem Symbol) oder eine Row (für Text neben dem Symbol) enthält und dann ein Icon-Widget und ein Text-Widget als Kinder haben.

Hier ist ein Beispiel:

class MyPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) =>
      Scaffold(
        appBar: AppBar(
          title: Text("Hello world"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FlatButton(
                onPressed: () => {},
                color: Colors.orange,
                padding: EdgeInsets.all(10.0),
                child: Column( // Replace with a Row for horizontal icon + text
                  children: <Widget>[
                    Icon(Icons.add),
                    Text("Add")
                  ],
                ),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => {},
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      );
}

Dies wird Folgendes erzeugen:

 Result

3
Xavi Rigau

Verwenden Sie Column oder Row in einem Button-Kind, Row für die horizontale Schaltfläche, Column für die vertikale und vergessen Sie nicht, enthalten es mit der benötigten Größe:

Container(
  width: 120.0,
  height: 30.0,
  child: RaisedButton(
    color: Color(0XFFFF0000),
    child: Row(
      children: <Widget>[
        Text('Play this song', style: TextStyle(color: Colors.white),),
        Icon(Icons.play_arrow, color: Colors.white,),
      ],
    ),
  ),
),
1

Flatter gibt Ihnen eine Richtlinie zum Erstellen eines Layouts. Die Beispiele finden Sie hier https://flutter.io/tutorials/layout/

0
Manoj Kumar

Sie können etwas tun wie

RaisedButton.icon( elevation: 4.0,
                    icon: Image.asset('images/image_upload.png' ,width: 20,height: 20,) ,
                      color: Theme.of(context).primaryColor,
                    onPressed: getImage,
                    label: Text("Add Team Image",style: TextStyle(
                        color: Colors.white, fontSize: 16.0))
                  ),
0

Screenshot:

enter image description here

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("Rounded button")),
    body: Center(
      child: SizedBox.fromSize(
        size: Size(56, 56), // button width and height
        child: ClipOval( 
          child: Material(
            color: Colors.orange, // button color
            child: InkWell(
              splashColor: Colors.green, // splash color
              onTap: () {}, // button pressed
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(Icons.call), // icon
                  Text("Call"), // text
                ],
              ),
            ),
          ),
        ),
      ),
    ),
  );
}
0
CopsOnRoad