Click here to Skip to main content
15,867,906 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello,
i want to Animate a Page, when the Icon in the Appbar is pressed in Flutter.

I have a code for the Animation, but then the code is not in the Appbar!

Furthermore I have a code for the Context which should be displayed on the page.

This Is my Animation Code:

<pre>class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  double xoffSet = 0;
  double yoffSet = 0;
  double angle = 0;

  bool isOpen = false;
  bool isPlaying = false;

  @override
  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,
                    ),
                  ),
                ],
              ),
            )));
  }
}


This is My other Code, which should be part of the Flutter-Page:

<pre>class GnewsView extends StatelessWidget {
  final StoryController controller = StoryController();
  // story view here
  Widget _buildHighlights(List<Highlight> highlights) {
    final stories = highlights.map<StoryItem>((it) {
      return StoryItem.inlineImage(
        url: it.image,
        caption: Text(
          it.headline,
          style: TextStyle(
            backgroundColor: Colors.black54,
            fontSize: 16,
            color: Colors.white,
          ),
        ),
        controller: controller,
        roundedTop: true,
      );
    }).toList();

    return StoryView(
      storyItems: stories,
      repeat: true,
      inline: true,
      progressPosition: ProgressPosition.bottom,
      controller: controller,
    );
  }

  Widget _buildCoverageButton() {
    return Builder(
      builder: (context) {
        return Material(
          color: Colors.blueAccent,
          borderRadius: BorderRadius.vertical(bottom: Radius.circular(8)),
          child: InkWell(
            onTap: () {},
            child: Container(
              decoration: BoxDecoration(
                  borderRadius:
                      BorderRadius.vertical(bottom: Radius.circular(8))),
              padding: EdgeInsets.symmetric(vertical: 8),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    Icons.arrow_forward,
                    color: Colors.white,
                  ),
                  SizedBox(
                    width: 16,
                  ),
                  Text(
                    "View full coverage",
                    style: TextStyle(fontSize: 16, color: Colors.white),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }

  Widget _buildExtra() {
    return ListTile(
      leading: Text("1"),
      title: Text(
        "Galaxy S20 Ultra teardown video shows superior periscope zoom",
        style: TextStyle(
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
      ),
      subtitle: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          SizedBox(
            height: 8,
          ),
          Text(
            "2 days ago • TechCatch.org",
            style: TextStyle(
              color: Colors.grey,
            ),
          )
        ],
      ),
    );
  }

  Widget _buildExtra2() {
    return ListTile(
      leading: Text("2"),
      title: Text(
        "Bill Gates steps down from Microsoft board, and others",
        style: TextStyle(
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
      ),
      subtitle: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          SizedBox(
            height: 8,
          ),
          Text(
            "2 days ago • WindoorsInsider",
            style: TextStyle(
              color: Colors.grey,
            ),
          )
        ],
      ),
    );
  }

  Widget _buildNews(Gnews news) {
    return ListView(
      padding: EdgeInsets.all(16),
      children: <Widget>[
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Icon(
              Icons.book,
              color: Colors.blue,
            ),
            SizedBox(
              width: 16,
            ),
            Expanded(
              child: Column(
                children: <Widget>[
                  Text(
                    news.title,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18,
                    ),
                  ),
                  Text(
                    "Bloobegg News",
                    style: TextStyle(
                      color: Colors.grey,
                    ),
                  )
                ],
                crossAxisAlignment: CrossAxisAlignment.start,
              ),
            )
          ],
        ),
        SizedBox(
          height: 16,
        ),
        SizedBox(
          height: 250,
          child: _buildHighlights(news.highlights),
        ),
        _buildCoverageButton(),
        SizedBox(
          height: 16,
        ),
        _buildExtra(),
        SizedBox(
          height: 16,
        ),
        _buildExtra2(),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(
          "Google News",
          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(),
      ),
    );
  }
}


Thank you very much for your help, i dont know how to make the Widgets working together.

What I have tried:

I am Flutter beginner, but i dont know how to solve this problem, i am very thankful for your help, i dont found a working way in the internet.
Posted
Updated 9-Jan-21 1:49am
Comments
wseng 11-Jan-21 12:51pm    
have you fixed?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900