CODEWITHSUNDEEP
flutterdartflutter-layoutdivider
Dorian Holmes
Dorian Holmes

Reputation: 11

Divider in AppBar not appearing

I am struggling to figure out why my divider in my app bar is not appearing. When I increase the height of the divider, I notice my widgets move up. I looked at similar issues and none have worked. My appBar consists of two columns and one row for the user profile information and information on their "Partner". I wanted to use the divider to separate the partner name and username from the win/loss ratio.strong text 

  Widget build(BuildContext context) {
    final user = Provider.of<User>(context);
    return  Scaffold( 
      appBar: AppBar( 
        backgroundColor: Color(0xFF2430346),
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(100.0),
          child: Row(
            children: <Widget>[
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.only(left:20.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      _buildUserInfo(user),
                      Text(
                        "@username",
                        style: new TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w600,
                          color: Colors.white,
                        )
                      )
                    ],
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(right:70.0),
                child: Expanded(
                  child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "My Partner",
                      style: new TextStyle(
                        fontSize: 24,
                        fontWeight: FontWeight.w600,
                        color: Colors.white,
                      ), 
                    ),
                    Text(
                      "Dorian",
                      style: new TextStyle(
                        color: Colors.white,
                      ),
                    ),
                    Text(
                      "@Doetheman",
                      style: new TextStyle(
                        color: Colors.white,
                      ),
                    ),
                    // Mfer aint appearing
                    Padding(
                      padding: const EdgeInsets.only(left: 16, right: 16, top: 10, bottom: 10),
                      child: Divider(
                        height: 2.0,
                        color: Colors.white,
                    ),
                    ),
                  ],
                ),
                ),
              ),
            ],
          ),
      ),
  ),
), 

Widget _buildUserInfo(User user) {
    return Column(
      children: [
        Avatar(
          photoUrl: user.photoUrl,
          radius: 40,
          borderColor: Colors.black54,
          borderWidth: 2.0,
        ),
        const SizedBox(height: 8),
        if (user.displayName != null)
          Text(
            user.displayName,
            style: TextStyle(color: Colors.white),
          ),
        const SizedBox(height: 8),
      ],
    );
  }
}

What I want it to look in view: enter image description here

Upvotes: 0

Views: 1375

Answers (3)

raihan chaira
raihan chaira

Reputation: 3

use vertical divider like this:

VerticalDivider(color: Colors.black)

Upvotes: 0

JT501
JT501

Reputation: 1705

Use IntrinsicWidth widget to wrap Column

IntrinsicWidth(
  child: Column(
    children: [
      // ....
      Divider(),
    ],
  ),
)

Upvotes: 0

Anas
Anas

Reputation: 1073

Instead of divider you can use container like this 

Container(
        alignment: Alignment.center,
        width: 250,
        height: 1,
        color: Colors.black
    ),

Upvotes: 2

Related Questions