Animation

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    theme: ThemeData(primarySwatch: Colors.deepOrange),
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> with TickerProviderStateMixin {
  bool showA = false;
  bool showB = false;
  bool showC = false;
  bool showD = false;

  AnimationController controller;

  @override
  void initState() {
    super.initState();
    // controller
  }

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    var Width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(title: Text('Animation')),
      body: Container(
        child: Padding(
          padding: const EdgeInsets.only(left: 13, right: 13, top: 13),
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(10)),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.1),
                  spreadRadius: 2,
                  blurRadius: 3,
                  offset: Offset(0, 3), // changes position of shadow
                ),
              ],
            ),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                child: Center(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(left: 8, right: 8),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Text(
                              'DIAGNOSIS',
                              style: TextStyle(
                                  color: Colors.black,
                                  fontFamily: 'PoppinsMedium',
                                  fontSize: 14),
                            ),
                            showB
                                ? GestureDetector(
                                    onTap: () {
                                      print('false');
                                      setState(() {
                                        showB = false;
                                      });
                                    },
                                    child:
                                        Icon(Icons.keyboard_arrow_up_outlined))
                                : GestureDetector(
                                    onTap: () {
                                      print('true');
                                      setState(() {
                                        showB = true;
                                      });
                                    },
                                    child: Icon(
                                        Icons.keyboard_arrow_down_outlined))
                          ],
                        ),
                      ),
                      AnimatedSize(
                        vsync: this,
                        duration: Duration(milliseconds: 250),
                        child: Container(
                          height: showB ? null : 0,
                          child: Column(
                            children: [
                              Padding(
                                padding: const EdgeInsets.only(top: 8),
                                child: Container(
                                  width: Width * 0.9,
                                  child: Divider(
                                    color: Colors.grey,
                                  ),
                                ),
                              ),
                              Padding(
                                padding: const EdgeInsets.only(
                                    left: 8, right: 8, bottom: 8, top: 2),
                                child: Container(
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Padding(
                                        padding: const EdgeInsets.only(
                                            top: 10, left: 7, bottom: 5),
                                        child: Text('Diagnosis',
                                            textAlign: TextAlign.left,
                                            style: TextStyle(
                                              fontFamily: 'PoppinsRegular',
                                              color: Colors.black,
                                            )),
                                      ),
                                      Container(
                                        width: Width * 0.92,
                                        child: TextFormField(
                                          onChanged: (value) {},
                                          onSaved: (value) {},
                                          style: TextStyle(
                                              fontSize: 15,
                                              color: Colors.black,
                                              fontFamily: 'UbuntuRegular'),
                                          decoration: new InputDecoration(
                                            suffixIcon: IconButton(
                                              icon: Icon(
                                                Icons.search_outlined,
                                                color: Color(0xffbdbdbd),
                                              ),
                                            ),
                                            border: new OutlineInputBorder(
                                              borderSide: const BorderSide(
                                                  color: Color(0xffbdbdbd),
                                                  width: 1),
                                              borderRadius:
                                                  const BorderRadius.all(
                                                const Radius.circular(10.0),
                                              ),
                                            ),
                                            enabledBorder:
                                                new OutlineInputBorder(
                                              borderSide: const BorderSide(
                                                  color: Color(0xffbdbdbd),
                                                  width: 1),
                                              borderRadius:
                                                  const BorderRadius.all(
                                                const Radius.circular(10.0),
                                              ),
                                            ),
                                            filled: true,
                                            hintStyle: new TextStyle(
                                                color: Color(0xffbdbdbd),
                                                fontFamily: 'UbuntuRegular'),
                                            hintText: "Enter Diagnosis",
                                            fillColor: Colors.white70,
                                            focusedBorder: OutlineInputBorder(
                                              borderSide: const BorderSide(
                                                  color: Colors.black,
                                                  width: 1),
                                              borderRadius:
                                                  const BorderRadius.all(
                                                const Radius.circular(10.0),
                                              ),
                                            ),
                                          ),
                                        ),
                                      ),
                                      Padding(
                                        padding: const EdgeInsets.only(
                                            top: 10, left: 7, bottom: 5),
                                        child: Text('Comments',
                                            textAlign: TextAlign.left,
                                            style: TextStyle(
                                              fontFamily: 'PoppinsRegular',
                                              color: Colors.black,
                                            )),
                                      ),
                                      Container(
                                        width: Width * 0.92,
                                        child: TextFormField(
                                          maxLines:
                                              5, // when user presses enter it will adapt to it
                                          onChanged: (value) {},
                                          onSaved: (value) {},
                                          style: TextStyle(
                                              fontSize: 15,
                                              color: Colors.black,
                                              fontFamily: 'UbuntuRegular'),
                                          decoration: new InputDecoration(
                                            border: new OutlineInputBorder(
                                              borderSide: const BorderSide(
                                                  color: Color(0xffbdbdbd),
                                                  width: 1),
                                              borderRadius:
                                                  const BorderRadius.all(
                                                const Radius.circular(10.0),
                                              ),
                                            ),
                                            enabledBorder:
                                                new OutlineInputBorder(
                                              borderSide: const BorderSide(
                                                  color: Color(0xffbdbdbd),
                                                  width: 1),
                                              borderRadius:
                                                  const BorderRadius.all(
                                                const Radius.circular(10.0),
                                              ),
                                            ),
                                            filled: true,
                                            hintStyle: new TextStyle(
                                                color: Color(0xffbdbdbd),
                                                fontFamily: 'UbuntuRegular'),
                                            hintText: "Enter Comments",
                                            fillColor: Colors.white70,
                                            focusedBorder: OutlineInputBorder(
                                              borderSide: const BorderSide(
                                                  color: Colors.black,
                                                  width: 1),
                                              borderRadius:
                                                  const BorderRadius.all(
                                                const Radius.circular(10.0),
                                              ),
                                            ),
                                          ),
                                        ),
                                      ),
                                      Align(
                                          alignment: Alignment.centerRight,
                                          child: Padding(
                                            padding:
                                                const EdgeInsets.only(top: 13),
                                            child: Container(
                                                decoration: BoxDecoration(
                                                  color: Colors.black,
                                                  shape: BoxShape.circle,
                                                ),
                                                child: Padding(
                                                  padding:
                                                      const EdgeInsets.all(4.0),
                                                  child: Icon(Icons.add,
                                                      size: 25.0,
                                                      color: Colors.white),
                                                )),
                                          )),
                                      Align(
                                        alignment: Alignment.center,
                                        child: Padding(
                                          padding: const EdgeInsets.only(
                                              top: 15, left: 7, bottom: 5),
                                          child: RawMaterialButton(
                                            onPressed: () {
                                              print('sad');
                                              setState(() {
                                                showA = false;
                                                showB = false;
                                                showC = true;
                                                showD = false;
                                              });
                                            },
                                            elevation: 2.0,
                                            fillColor: Colors.white,
                                            child: Icon(Icons.check_outlined,
                                                size: 35.0,
                                                color: Colors.black),
                                            padding: EdgeInsets.all(15.0),
                                            shape: CircleBorder(),
                                          ),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}