1
votes

Boutons Flutter personnalisés dans une rangée

Je veux créer un bouton qui ressemble à l'image ci-dessus avec Flutter. Mais je n'ai aucune idée de comment y parvenir ... aidez-moi, s'il vous plaît!

flutter button custom-button

2 commentaires

Qu'avez-vous essayé jusqu'à présent.

Je l'ai complété et téléchargé le code ci-dessous. :)

3 Réponses :

2
votes

Pour créer un Button composé similaire, vous devez utiliser un widget stack , vous pouvez voir que les deux boutons latéraux sont identiques, donc ce sont des boutons identiques dans une rangée avec un BorderRadius . la conception du bouton du milieu peut être effectuée en découpant la bordure du bouton de la moitié de sa largeur , puis en la plaçant au milieu de la ligne.

1 commentaires

Merci pour le tuyau. Je l'ai fait et j'ai téléchargé le code ci-dessous.

0
votes

Vous pouvez utiliser un IconButton avec une image d'élément contenant un arrière-plan transparent.

IconButton(
     icon: Image.asset('assets/your/transperantBG/icon.png'),
    onPressed: (){},
)

2 commentaires

créer une image qui ressemble à votre bouton et, créer l'enfant d'InkWell.

merci d'avoir donné une idée, je l'ai fait en quelque sorte! La morue est en dessous

8
votes

Widget _startButton(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 250.0),
      child: Stack(
        children: <Widget>[
          Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                _buildSideButtons(context, Icons.settings, palette.limeYellow,
                    const EdgeInsets.only(right: 30.0)),
                _buildSideButtons(context, Icons.lightbulb_outline,
                    palette.limeGreen, const EdgeInsets.only(left: 30.0)),
              ],
            ),
          ),
          Center(
              child: Container(
                  width: MediaQuery.of(context).size.width * 0.35,
                  height: MediaQuery.of(context).size.height,
                  child: DecoratedBox(
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        gradient: LinearGradient(
                            begin: Alignment.centerLeft,
                            end: Alignment.centerRight,
                            colors: [palette.limeYellow, palette.limeGreen])),
                  ))),
          Center(
              child: Container(
                  width: MediaQuery.of(context).size.width * 0.275,
                  height: MediaQuery.of(context).size.height,
                  child: new RaisedButton(
                      elevation: 0.0,
                      color: Colors.white,
                      child: new Text(
                        "START",
                        style: TextStyle(
                            fontFamily: "Bebas Neue",
                            fontSize: 25.0,
                            fontWeight: FontWeight.bold),
                      ),
                      onPressed: () => Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (BuildContext context) => CountDown())),
                      shape: CircleBorder())))
        ],
      ),
    );
  }


  Widget _buildSideButtons(
      BuildContext context, IconData icon, Color coverColor, EdgeInsets pad,
      {VoidCallback navigate}) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.07,
      child: RaisedButton(
        elevation: 5.0,
        onPressed: () {},
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(50.0))),
        child: Container(
          child: Padding(
            padding: pad,
            child: Icon(icon, color: Colors.black),
          ),
        ),
        color: coverColor,
        textColor: Colors.white,
      ),
    );
  }
I used Stack and Raised Buttons and finally made it! Thank you for the advice. I simply need to add boxShadow to make it close to the example picture I uploaded above.

0 commentaires