Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Homepage feed doesn't show specific post

I made 2 pages, one for homepage and one for post ( meaning the design of the user profile)
I try to add the user profile to the homepage but I do something wrong with the alignment . Any idea ?

Homepage code:


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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Padding(
      padding: const EdgeInsets.all(10.0),
      child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [PostDetail()]),
    ));
  }
}

And this is the Post detail code

class PostDetail extends StatefulWidget {
  @override
  PostDetailState createState() => PostDetailState();
}

class PostDetailState extends State<PostDetail> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
          padding: EdgeInsets.only(top: 10, left: 20, right: 20),
          child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                SizedBox(height: 15),
                Container(
                  height: MediaQuery.of(context).size.height / 2.2,
                  width: MediaQuery.of(context).size.width / 1.1,
                  child: Padding(
                      padding: EdgeInsets.all(30),
                      child: Column(
                        children: [
                          Text(
                            'Username',
                            // widget.UserName,
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                          SizedBox(height: 15),
                          Text('Post'
                              // widget.Post,
                              ),
                        ],
                      )),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(60),
                        topRight: Radius.circular(60),
                        bottomLeft: Radius.circular(60),
                        bottomRight: Radius.circular(60)),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.5),
                        spreadRadius: 5,
                        blurRadius: 7,
                        offset: Offset(0, 3),
                      )
                    ],
                  ),
                ),
                SizedBox(
                  height: 15,
                ),
                SizedBox(
                  height: 50,
                ),
                Container(
                    child: Container(
                        width: MediaQuery.of(context).size.width / 1.5,
                        child: ElevatedButton(
                          onPressed: () {},
                          child: Text(
                            "Message",
                            style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold),
                          ),
                        )))
              ])),
    );
  }
}

And this is the Outcome Homepage screenshot

I try to add some padding but stil didn’t changed much

Tags:

2

Answers


  1. 0

    You have nested Scaffolds, just remove the Scaffold above the PostDetailState.

    return Scaffold(
      body: Padding(
          padding: EdgeInsets.only(top: 10, left: 20, right: 20),
            ...
 );

    Fix

    return Padding(
              padding: EdgeInsets.only(top: 10, left: 20, right: 20),
            ...
     );
    Login or Signup to reply.
  2. 0

    First of all when you’re using nested widgets or screens avoid to duplicate the usage of Scaffold(); so for your case you can remove it inside PostDetail()

    Then in the Homepage you can just remove the Column when it’s only one child.

    Note: your PostDetail() has size more than the screen size because of your Mediaquery usage, i prefer to use fixed sized rather than percentages in these cases.

    and here’s edited version of your code to work fine.

    HomePage

    class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  HomePageState createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Padding(
        padding: EdgeInsets.all(10.0),
        child: PostDetail(),
      ),
    );
  }
}

    PostDetail

    class PostDetail extends StatefulWidget {
  const PostDetail({super.key});

  @override
  PostDetailState createState() => PostDetailState();
}

class PostDetailState extends State<PostDetail> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Padding(
        padding: const EdgeInsets.only(top: 10, left: 20, right: 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 15),
            Container(
              height: MediaQuery.of(context).size.height / 2.2,
              width: MediaQuery.of(context).size.width / 1.1,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(60),
                    topRight: Radius.circular(60),
                    bottomLeft: Radius.circular(60),
                    bottomRight: Radius.circular(60)),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.5),
                    spreadRadius: 5,
                    blurRadius: 7,
                    offset: const Offset(0, 3),
                  )
                ],
              ),
              child: const Padding(
                padding: EdgeInsets.all(30),
                child: Column(
                  children: [
                    Text(
                      'Username',
                      // widget.UserName,
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    SizedBox(height: 15),
                    Text('Post'
                        // widget.Post,
                        ),
                  ],
                ),
              ),
            ),
            const SizedBox(
              height: 15,
            ),
            const SizedBox(
              height: 50,
            ),
            SizedBox(
              width: MediaQuery.of(context).size.width / 1.5,
              child: ElevatedButton(
                onPressed: () {},
                child: const Text(
                  "Message",
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search