Flutter - Fix overlapping between Container `Text` and Container Form

javiens
March 26, 2024
163 views
3 votes
4 Answers

I cannot make padding between Container TextFormFiel and Text. It become overlapping like this image..

And this my problem code

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile'),
      ),
      body: Stack(
        children: [
          Container(
            width: double.infinity,
            height: double.infinity,
            color: Colors.blue, // Second layer background color
          ),
          Positioned(
            top: 0,
            left: 10,
            right: 10,
            bottom: 0,
            child: Container(
              child: ProfileForm(),
              margin: EdgeInsets.only(top: 48),
              height: 500,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(16.0),
              ),
            ),
          ),
          Positioned(
            top: 16,
            left: 0,
            right: 0,
            child: Align(
              alignment: Alignment.topCenter,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: Column(
                  children: [
                    CircleAvatar(
                      radius: 40.0,
                      backgroundColor: Colors.white,
                      child: CircleAvatar(
                        child: Align(
                          alignment: Alignment.bottomRight,
                          child: CircleAvatar(
                            backgroundColor: Colors.white,
                            radius: 12.0,
                            child: Icon(
                              Icons.camera_alt,
                              size: 15.0,
                              color: Color(0xFF404040),
                            ),
                          ),
                        ),
                        radius: 38.0,
                        backgroundImage: AssetImage(
                          'assets/images/user-image-default.png',
                        ),
                      ),
                    ),
                    SizedBox(height: 8),
                    Text(
                      'John Doe',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 18,
                      ),
                    ),
                    Text(
                      '[email protected]',
                      style: TextStyle(
                        fontSize: 16,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Tags: dart flutter

Answers

If I understood your problem, it’s because of you use [Stack widget][1] to layout your widgets so they are positioned one on one.

You can change Stack to [Column][2] to layout children one under one. For changing background color you can use container with child property:

  ///
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile'),
      ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.blue, // Second layer background color
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: Column(
          children: [
            const Padding(
              /// Just change this value to change offset between top panel and avatar
              padding: EdgeInsets.only(top: 16),
              child: Column(
                children: [
                  CircleAvatar(
                    radius: 40.0,
                    backgroundColor: Colors.white,
                    child: CircleAvatar(
                      child: Align(
                        alignment: Alignment.bottomRight,
                        child: CircleAvatar(
                          backgroundColor: Colors.white,
                          radius: 12.0,
                          child: Icon(
                            Icons.camera_alt,
                            size: 15.0,
                            color: Color(0xFF404040),
                          ),
                        ),
                      ),
                      radius: 38.0,
                      // Commented because of I don't have your png file
                      /*backgroundImage: AssetImage(
                          'assets/images/user-image-default.png',
                        ),*/
                    ),
                  ),
                  SizedBox(height: 8),
                  Text(
                    'John Doe',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18,
                    ),
                  ),
                  Text(
                    '[email protected]',
                    style: TextStyle(
                      fontSize: 16,
                    ),
                  ),
                ],
              ),
            ),
            Container(
              //child: ProfileForm(),
              /// Just change this value to change offset between profile widget and profile form
              margin: EdgeInsets.only(top: 48),
              height: 500,
              decoration: BoxDecoration(
                // Color changed to better visibility because of
                // I don't have your ProfileForm
                //color: Colors.white,
                color: Colors.red,
                borderRadius: BorderRadius.circular(16.0),
              ),
            ),
          ],
        ),
      ),
    );
  }

Or, if you need to use only stack, just increase your second Positioned‘s top – the higher this value, the lower the widget will be located

  ///
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile'),
      ),
      body: Stack(
        children: [
          Container(
            width: double.infinity,
            height: double.infinity,
            color: Colors.blue, // Second layer background color
          ),
          Positioned(
            top: 110,
            left: 10,
            right: 10,
            bottom: 0,
            child: Container(
              //child: ProfileForm(),
              margin: EdgeInsets.only(top: 48),
              height: 500,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(16.0),
              ),
            ),
          ),
          Positioned(
            top: 16,
            left: 0,
            right: 0,
            child: Align(
              alignment: Alignment.topCenter,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: Column(
                  children: [
                    CircleAvatar(
                      radius: 40.0,
                      backgroundColor: Colors.white,
                      child: CircleAvatar(
                        child: Align(
                          alignment: Alignment.bottomRight,
                          child: CircleAvatar(
                            backgroundColor: Colors.white,
                            radius: 12.0,
                            child: Icon(
                              Icons.camera_alt,
                              size: 15.0,
                              color: Color(0xFF404040),
                            ),
                          ),
                        ),
                        radius: 38.0,
                      // Commented because of I don't have your png file
                        /*backgroundImage: AssetImage(
                          'assets/images/user-image-default.png',
                        ),*/
                      ),
                    ),
                    SizedBox(height: 8),
                    Text(
                      'John Doe',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 18,
                      ),
                    ),
                    Text(
                      '[email protected]',
                      style: TextStyle(
                        fontSize: 16,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

As for me – first way is better for this situation.

Also you can use many other ways – combine Stack & Column for example.

Merge the second layer with the third layer:

I think when stack layers increases the confusion increases, use two layers

this is the second layer:

Positioned(
            top: 0,
            left: 10,
            right: 10,
            bottom: 0,
            child: Container(
              child: Column(

                       children:[

                         // 1 . Your Third Layer eg: john Doe Text
                         //2.  Your ProfileForm()
                          ]
                         ),
              margin: EdgeInsets.only(top: 48),
              // height: 500, refactor your code and adjust dimensions
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(16.0),
              ),
            ),
          ),

Keep the blue container as a background layer.

Remove stack and do like this, card widget,

Container(
            decoration: BoxDecoration(
              color: Colors.grey,
              borderRadius: BorderRadius.circular(5),
            ),
            child: Column(
              children: [
                CircleAvatar(
                  radius: 40.0,
                  backgroundColor: Colors.white,
                  child: CircleAvatar(
                    child: Align(
                      alignment: Alignment.bottomRight,
                      child: CircleAvatar(
                        backgroundColor: Colors.white,
                        radius: 12.0,
                        child: Icon(
                          Icons.camera_alt,
                          size: 15.0,
                          color: Color(0xFF404040),
                        ),
                      ),
                    ),
                    radius: 38.0,
                    backgroundImage: AssetImage(
                      'assets/images/user-image-default.png',
                    ),
                  ),
                ),
                SizedBox(height: 8),
                Text(
                  'John Doe',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 18,
                  ),
                ),
                Text('[email protected]',
                    style: TextStyle(
                      fontSize: 16,
                    ))
              ],
            ),
          ),

Here you have a basic example without hardcoding any size/height on your Widget, the height is calculated after your header is rendered.

Result:

Code:

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

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final _keyUserData = GlobalKey();
  double _userDataHeight = 0.0;

  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        _userDataHeight = _keyUserData.currentContext?.size?.height ?? 0.0;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    const avatarSize = 38.0;
    return Scaffold(
      appBar: AppBar(
        title: const Text('Profile'),
      ),
      backgroundColor: Colors.blue,
      body: Container(
        margin: const EdgeInsets.symmetric(vertical: 48, horizontal: 12),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(16.0),
        ),
        child: Stack(
          clipBehavior: Clip.none,
          children: [
            Positioned(
              left: 0,
              right: 0,
              top: -avatarSize / 2,
              child: Column(
                key: _keyUserData,
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: const [
                  Center(
                    child: CircleAvatar(
                      radius: avatarSize,
                      backgroundImage: AssetImage(
                        'assets/images/user-image-default.png',
                      ),
                      child: Align(
                        alignment: Alignment.bottomRight,
                        child: CircleAvatar(
                          backgroundColor: Colors.white,
                          radius: 12.0,
                          child: Icon(
                            Icons.camera_alt,
                            size: 15.0,
                            color: Color(0xFF404040),
                          ),
                        ),
                      ),
                    ),
                  ),
                  SizedBox(height: 8),
                  Text(
                    'John Doe',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18,
                    ),
                  ),
                  Text(
                    '[email protected]',
                    style: TextStyle(
                      fontSize: 16,
                    ),
                  ),
                ],
              ),
            ),
            Positioned(
              left: 0,
              right: 0,
              top: _userDataHeight,
              child: const ProfileForm(),
            ),
          ],
        ),
      ),
    );
  }
}

class ProfileForm extends StatelessWidget {
  const ProfileForm({super.key});

  @override
  Widget build(BuildContext context) {
    return const Padding(
      padding: EdgeInsets.symmetric(horizontal: 30.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          TextField(
            decoration: InputDecoration(
              labelText: 'First Name',
              hintText: 'Enter your first name',
            ),
          ),
          TextField(
            decoration: InputDecoration(
              labelText: 'Last Name',
              hintText: 'Enter your last name',
            ),
          ),
          TextField(
            decoration: InputDecoration(
              labelText: 'Email',
              hintText: 'Enter your email',
            ),
          ),
        ],
      ),
    );
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – Fix overlapping between Container `Text` and Container Form

Answers

Merge the second layer with the third layer: