简体   繁体   中英

How to add multiple button in one row inside Inkwell widget in flutter

How to add multiple buttons at the top in one row,that should inside the inkwell widget.Below is the code of inkwell widget

  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Flutter Counter"),
      ),
      body:InkWell(
        onTap: () {
          setState(() { _increment();});
        },
        child:Container(
          decoration: new BoxDecoration(color: Colors.blueAccent),
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child:Center(
            child: Text('$counter',

              style: TextStyle(fontSize: 60.0,fontWeight: FontWeight.bold,color: Colors.white),),
          ),

        ),
      ),
    );
  }
}

Wrap content of InkWell into Stack and use Row for needed buttons. If I've understood your question correct

Widget build(BuildContext context) {
  return Scaffold(
      appBar: new AppBar(
        elevation:
        Theme.of(context).platform == TargetPlatform.iOS
            ? 0.0
            : 4.0,
        title: new Text(
          "HelloFlutter",
        ),
      ),
      body: InkWell(
        onTap: () {
          setState(() { _increment();});
        },
        child: Stack(
          children: <Widget>[
            Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    FlatButton(onPressed: (){ setState(() {
                      counter = 1;
                    }); }, child: Text('Button1')),
                    FlatButton(onPressed: (){setState(() {
                      counter = 2;
                    }); }, child: Text('Button2')),
                    FlatButton(onPressed: (){setState(() {
                      counter = 3;
                    }); }, child: Text('Button3')),
                  ],
                )
              ],
            ),
            Center(
              child: Text('$counter',

                style: TextStyle(fontSize: 60.0,fontWeight: FontWeight.bold,color: Colors.red),),
            ),
          ],
        )
      ),
    );
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM