CODEWITHSUNDEEP
flutterdart
Mohammed Hamdan
Mohammed Hamdan

Reputation: 1355

How can i make animated widget to be animated with overwrite the column

i have simple AnimatedContainer which located on the last item in a column and this AnimatedContainer invisible as default . when i press button so it animating from bottom screen to top (Reach the middle of the screen)

but the problem is i have others widgets in this Column which cause widget inspect errors

of course i can slove this by Flexible widget or Expanded but that's will resize every child into column . but i need it to animating up of the children such as Stack

this my code

 bool selected = false ;
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      backgroundColor: Colors.blue,
      appBar: AppBar(),
      body: Column(
              children: [
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      selected = !selected;
                    });
                  },
                  child: Text("Tap Me!!"),
                ),
                Text('Welcome'),
                Text('Welcome'),
                Text('Welcome'),
                Text('Welcome'),
                Text('Welcome'),
                Text('Welcome'),
                Text('Welcome'),
                Text('Welcome'),
                Text('Welcome'),
                Text('Welcome'),
                Text('Welcome'),
                Text('Welcome'),
                Text('Welcome'),
                Text('Welcome'),
                Text('Welcome'),
                Text('Welcome'),
                Text('Welcome'),
                Text('Welcome'),
                Text('Welcome'),
                Text('Welcome'),
                Spacer(),
                AnimatedContainer(
                  width: double.infinity,
                  height: selected ? MediaQuery.of(context).size.height / 2 : 0,
                  color: selected ? Colors.red : Colors.blue,
                  alignment:
                  selected ? Alignment.center : AlignmentDirectional.topCenter,
                  duration: const Duration(seconds: 2),
                  curve: Curves.fastOutSlowIn,
                  child: const FlutterLogo(size: 75),
                )
          ]
          ),

Any sharing of knowledge would be grateful

enter image description here

Upvotes: 0

Views: 103

Answers (1)

Vishal Parmar
Vishal Parmar

Reputation: 613

Hello Please try with below code hope it's work for you let me know if you have any query

    @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                    children: [
                      ElevatedButton(
                        onPressed: () {
                          setState(() {
                            selected = !selected;
                          });
                        },
                        child: Text("Tap Me!!"),
                      ),
                      Text('Welcome'),
                      Text('Welcome'),
                      Text('Welcome'),
                      Text('Welcome'),
                      Text('Welcome'),
                      Text('Welcome'),
                      Text('Welcome'),
                      Text('Welcome'),
                      Text('Welcome'),
                      Text('Welcome'),
                      Text('Welcome'),
                      Text('Welcome'),
                      Text('Welcome'),
                      Text('Welcome'),
                      Text('Welcome'),
                      Text('Welcome'),
                      Text('Welcome'),
                      Text('Welcome'),
                      Text('Welcome'),
                      Text('Welcome'),
                    ]
                ),
              ),
            ),

            AnimatedContainer(
              width: double.infinity,
              height: selected ? MediaQuery.of(context).size.height / 2 : 0,
              color: selected ? Colors.red : Colors.blue,
              alignment:
              selected ? Alignment.center : AlignmentDirectional.topCenter,
              duration: const Duration(seconds: 2),
              curve: Curves.fastOutSlowIn,
              child: const FlutterLogo(size: 75),
            )
          ],
        ),
      ),
    );
  }

Upvotes: 1

Related Questions