CODEWITHSUNDEEP
flutterdartwidgetalignment
Anas Altarazi
Anas Altarazi

Reputation: 117

how to position children of stack in bottom right or left in flutter? (responsive)

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('snackbar'),
      ),
      body: Center(
        child: Stack(
            fit: StackFit.passthrough,
            alignment: Alignment.center,
            children: [
              Container(
                width: 400,
                height: 400,
                color: Colors.amber,
              ),
              Container(
                width: 200,
                height: 200,
                color: Colors.cyan,
              ),
              RaisedButton(
                child: Text(
                  'click me',
                  style: TextStyle(color: Colors.white),
                ),
                color: Colors.blue,
                onPressed: () {
                  Get.dialog(MyDialog());
                },
              ),
            ]),
      ),
      floatingActionButton: FloatingActionButton(onPressed: () {
        incFun();
        Get.snackbar(
          'Hi',
          'i am a simple $_increament',
          snackPosition: SnackPosition.BOTTOM,
          icon: Icon(Icons.add_comment),
        );
      }),
    );
  }

enter image description here

I am trying to align widgets without using dimensions I tried positioned and align widget but they put button in the bottom of the screen I want to set button in bottom right amber container

Upvotes: 1

Views: 2471

Answers (1)

user14596272
user14596272

Reputation: 

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('snackbar'),
      ),
      body: Center(
        child: Stack(
            fit: StackFit.loose, // Just Changed this line
            alignment: Alignment.bottomRight, // Just changed this line
            children: [
              Container(
                width: 400,
                height: 400,
                color: Colors.amber,
              ),
              Container(
                width: 200,
                height: 200,
                color: Colors.cyan,
              ),
              RaisedButton(
                child: Text(
                  'click me',
                  style: TextStyle(color: Colors.white),
                ),
                color: Colors.blue,
                onPressed: () {
                  Get.dialog(MyDialog());
                },
              ),
            ]),
      ),
      floatingActionButton: FloatingActionButton(onPressed: () {
        incFun();
        Get.snackbar(
          'Hi',
          'i am a simple $_increament',
          snackPosition: SnackPosition.BOTTOM,
          icon: Icon(Icons.add_comment),
        );
      }),
    );
  }

Just changed two lines which are commented. Rest is the same..

Upvotes: 2

Related Questions