user8210794
user8210794

Reputation:

Widget on a widget with Centering

I want to put a widget onto other's view.

Here is what I didenter image description here

In normal version without countdown timer, there is no whitespace inside the screen. It is %50 %50 divided by colours(red and blue).

What I want to do is adding that countdown timer without creating whitespace. Directly adding it onto those colours on the center.

I saw that with Stack it is possible to do. I tried it but couldn't remove the white area.

Here is my code:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new Column(
        children: [
          Expanded(
            flex: 40,
            child: new Container(
              width: double.infinity,
              child: new Column(
                children: <Widget>[
                  box1 = new Expanded(
                    flex: boxSize1,
                    child: InkWell(
                      onTap: () {
                        clickBox1();
                      }, // Handle your callback
                      child: new Container(
                        alignment: Alignment.topCenter,
                        color: colorRandom,
                      ),
                    ),
                  ),
                  TimeCircularCountdown(
                    unit: CountdownUnit.second,
                    countdownTotal: 3,
                    onUpdated: (unit, remainingTime) => print('Updated'),
                    onFinished: () {
                      setState(() {
                        visibility = false;
                      });
                    },
                  ),
                  box2 = new Expanded(
                    flex: boxSize2,
                    child: InkWell(
                      onTap: () {
                        clickBox2();
                      }, // Handle your callback
                      child: new Container(
                        alignment: Alignment.topCenter,
                        color: color,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );

Upvotes: 0

Views: 39

Answers (1)

Bholendra Singh
Bholendra Singh

Reputation: 1156

Screenshot

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Column(
            children: [
              Expanded(
                  child: Container(
                color: Colors.blue,
              )),
              Expanded(
                  child: Container(
                color: Colors.red,
              )),
            ],
          ),
          Center(
            child: Container(
              height: 200,
              width: 200,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(100),
                color: Colors.white,
              ),
              // use your countdown timer widget in child
            ),
          )
        ],
      ),
    );
  }

Upvotes: 0

Related Questions