Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
367 views
in Technique[技术] by (71.8m points)

flutter - Return AnimatedContainer in Build Widget When Icon is Pressed

at first let me tell you my question. I want to add an Animation to a Build Widget. When I test both code in a single way it is working fine. If i want to add the Animation to the Build Widget it is not working. I am Flutter beginner but i hope you can help me. I do not found a working way or stackoverflow-page that has a soloution for this problem.

Here is the Code of the Build Widget

@override

  Widget build(BuildContext context) {

    return Scaffold(

      backgroundColor: Colors.white,

      appBar: AppBar(

        backgroundColor: Colors.white,

        title: Text(

          "Title",

          style: TextStyle(

            color: Colors.black,

            fontSize: 16,

          ),

        ),

        leading: IconButton(

          icon: Icon(

            Icons.arrow_back,

            color: Colors.black,

          ),

          onPressed: () {

            Navigator.of(context).pop();

          },

        ),

      ),

      body: FutureBuilder(

        builder: (context, snapshot) {

          if (snapshot.hasData) {

            return _buildNews(snapshot.data);

          }



          if (snapshot.hasError) {

            return ErrorView();

          }



          return Center(

            child: SizedBox(

              width: 40,

              height: 40,

              child: CircularProgressIndicator(),

            ),

          );

        },

        future: Repository.getNews(),

      ),

    );

  }

I want to add the following code like appbar. if the icon is pressed, the animation should rotate the entire page.

Widget build(BuildContext context) {
    return AnimatedContainer(
        transform: Matrix4Transform()
            .translate(x: xoffSet, y: yoffSet)
            .rotate(angle)
            .matrix4,
        duration: Duration(milliseconds: 250),
        child: Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
                color: Colors.blue[200],
                borderRadius: isOpen
                    ? BorderRadius.circular(10)
                    : BorderRadius.circular(0)),
            child: SafeArea(
              child: Stack(
                children: [
                  !isOpen
                      ? IconButton(
                          icon: Icon(
                            Icons.menu,
                            color: Color(0xFF1f186f),
                          ),
                          onPressed: () {
                            setState(() {
                              xoffSet = 150;
                              yoffSet = 80;
                              angle = -0.2;
                              isOpen = true;
                            });

                            secondLayerState.setState(() {
                              secondLayerState.xoffSet = 122;
                              secondLayerState.yoffSet = 110;
                              secondLayerState.angle = -0.275;
                            });
                          })
                      : IconButton(
                          icon: Icon(Icons.arrow_back_ios,
                              color: Color(0xFF1f186f)),
                          onPressed: () {
                            if (isOpen == true) {
                              setState(() {
                                xoffSet = 0;
                                yoffSet = 0;
                                angle = 0;
                                isOpen = false;
                              });

                              secondLayerState.setState(() {
                                secondLayerState.xoffSet = 0;
                                secondLayerState.yoffSet = 0;
                                secondLayerState.angle = 0;
                              });
                            }
                          }),
                  Center(
                    child: Image.asset(
                      "assets/avatar.png",
                      height: MediaQuery.of(context).size.height / 2,
                    ),
                  ),
                ],
              ),
            )));
  }

Thank you very much for your help!!!


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...