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

Can Flutter fix text alignment issues?

What am I doing: I want to show button text and one more button one under the other.

Problem: When I click the button, the text and the other button at the bottom change places.

How can I fix this problem?

 return Scaffold(
      body: Consumer2<ThemeNotifier, RecorderNotifier>(
        builder: (context, theme, recorder, child) => Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(height: 32.0),
            Center(
              child: Stack(
                alignment: Alignment.center,
                children: [
                  Visibility(
                    visible: recorder.isRecording,
                    child: Lottie.asset('assets/recording_animation.json'),
                  ),
                  Container(
                    decoration: BoxDecoration(
                      color: mRed,
                      border: recorder.isRecording ? null : Border.all(),
                      shape: BoxShape.circle,
                    ),
                    child: IconButton(
                      color: mWhiteColor,
                      iconSize: MediaQuery.of(context).size.width * 0.3,
                      icon: Icon(
                        recorder.isRecording
                            ? Icons.stop_rounded
                            : Icons.keyboard_voice_outlined,
                      ),
                      onPressed: () => recorder.isRecording
                          ? RecorderService().stopRecord(recorder)
                          : RecorderService().startRecord(recorder),
                    ),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 32.0),
            const Text(
              'Example',
              style: TextStyle(fontSize: 32.0),
            ),
            const SizedBox(height: 32.0),
          ],
        ),
      ),
    );
Tags:

2

Answers


  1. 0

    In the Visibility widget, add the maintainState property and set it to true. This ensures that when the visible property is set to false, the state of the widget is still maintained. This prevents the text and the other button at the bottom from changing places when you click the button.

    Visibility(
  visible: recorder.isRecording,
  child: Lottie.asset('assets/recording_animation.json'),
  maintainState: true, // Added this line to maintain the state
),

    Adding this property helps maintain the widget’s state and layout even if it’s not visible. This prevents the layout from shifting when the visibility changes.

    Login or Signup to reply.
  2. 0

    When you use a Stack, the widgets are placed on top of each other in the order they’re created. In your case, there’s a Container with an IconButton on top of a Lottie animation.

    When you hide the Lottie animation, it changes the order of the widgets in the Stack, which can move the IconButton to a different spot. To fix this, you can use the Positioned tool to place the Container and Lottie animation based on the top and bottom of the screen.

        //**Here's an example of how you can update your code to use Positioned:**   
       /// code...
        return Scaffold(
              body: Consumer2<ThemeNotifier, RecorderNotifier>(
                builder: (context, theme, recorder, child) => Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const SizedBox(height: 32.0),
                    Visibility(
                      visible: recorder.isRecording,
                      child: Lottie.asset('assets/recording_animation.json'),
                    ),
                    const SizedBox(height: 16.0),
                    Positioned(
                      bottom: 0.0,
                      child: Container(
                        decoration: BoxDecoration(
                          color: mRed,
                          border: recorder.isRecording ? null : Border.all(),
                          shape: BoxShape.circle,
                        ),
                        child: IconButton(
                          color: mWhiteColor,
                          iconSize: MediaQuery.of(context).size.width * 0.3,
                          icon: Icon(
                            recorder.isRecording
                                ? Icons.stop_rounded
                                : Icons.keyboard_voice_outlined,
                          ),
                          onPressed: () => recorder.isRecording
                              ? RecorderService().stopRecord(recorder)
                              : RecorderService().startRecord(recorder),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search