only image size decrease not container size and position change in flutter

Question

in this code i have to when keyboard open and stack image size decrease that time i have to decrease the container size , container position and text size to change according to image.

if image size change so all the widgets on image are change according to image.

import 'package:flutter/material.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Your App Title',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: EditPage(),
    );
  }
}

class EditPage extends StatefulWidget {
  const EditPage({super.key,});
  @override
  State<EditPage> createState() => _EditPageState();
}

class _EditPageState extends State<EditPage> {
  List<Widget> movableTextWidgets = [];
  bool isKeyboardVisible = false;

  @override
  Widget build(BuildContext context) {
    final bool isKeyboardVisible =
        MediaQuery.of(context).viewInsets.bottom > 0;
    return Directionality(
        textDirection: TextDirection.ltr,
        child:   Scaffold(
          backgroundColor: Colors.white.withOpacity(0.9),
          body: SafeArea(
                child: Center(
                  child: Stack(
                    alignment: isKeyboardVisible ? Alignment.topCenter: Alignment.center,

                    children : [
                      Hero(
                        tag: "image1",
                        child: AspectRatio(
                          aspectRatio: 5 / 7, // Set your desired aspect ratio
                          child: Padding(
                            padding: isKeyboardVisible ? const EdgeInsets.symmetric(horizontal: 30, vertical: 30)
                                :const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
                            child: Container(
                              width: double.infinity,
                              height: double.infinity,
                              decoration: BoxDecoration(
                                boxShadow: const [
                                  BoxShadow(
                                    blurRadius: 4,
                                  ),
                                ],
                                image: DecorationImage(
                                  fit: BoxFit.cover,
                                  //add image here any
                                  image: AssetImage("images/2.png"),
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                      ...movableTextWidgets,
                    ],
                              ),
                ),
          ),

          floatingActionButton: FloatingActionButton(
            backgroundColor: Colors.lightGreenAccent,
            shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(50.0))),
            foregroundColor: Colors.black,
            onPressed: () {
              _addMovableTextBox();

            },
            child: Icon(Icons.add),
          ),
        )
    );
  }
  void _addMovableTextBox() {
    setState(() {
      movableTextWidgets.add(MovableTextBox());
    });
  }
}


class MovableTextBox extends StatefulWidget {
  @override
  _MovableTextBoxState createState() => _MovableTextBoxState();
}
const ballDiameter = 15.0;
class _MovableTextBoxState extends State<MovableTextBox> {
  double width = 200.0;
  double height = 80.0;
  double top = 200;
  double left = 100;
  TextEditingController textController = TextEditingController();
  GlobalKey<_TextFieldState> textFieldKey = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Stack(
        children: <Widget>[
          Positioned(
            top: top,
            left: left,
            child: GestureDetector(
              onPanUpdate: (details) {
                setState(() {
                  top += details.delta.dy;
                  left += details.delta.dx;
                });
              },

                  child: Container(
                    width: width,
                    height: height,
                    decoration: BoxDecoration(
                      color: Colors.transparent,
                      border: Border.all(
                        width: 2,
                        color: Colors.black,
                      ),
                      borderRadius: BorderRadius.circular(0.0),
                    ),
                    child: Center(
                      child: TextField(
                        key: textFieldKey,
                        controller: textController,
                        style: TextStyle(color: Colors.black, fontSize: 18),
                        decoration: InputDecoration(
                            hintText: "Enter text",
                            helperStyle: TextStyle(color: Colors.black),
                            border: InputBorder.none
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),

            ),
          )
        ]
    );
  }
}

In this code when i add text container and add text that time the keyboard open and if keyboard open the size of stack image is decrease but not container size and position change.

class _TextFieldState extends State<TextField> {
  late double fontSize;

  @override
  Widget build(BuildContext context) {
    return TextField(
      style: TextStyle(fontSize: fontSize),
    );
  }

  void updateFontSize(double newSize) {
    setState(() {
      fontSize = newSize;
    });
  }
}

what i can do for this?

Answer 1

you can use KeyboardVisibilityBuilder package. Below is how your code will look like after that:

import 'package:flutter/material.dart';
import 'package:keyboard_visibility_builder/keyboard_visibility_builder.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Your App Title',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: EditPage(),
    );
  }
}

class EditPage extends StatefulWidget {
  const EditPage({Key? key}) : super(key: key);

  @override
  State<EditPage> createState() => _EditPageState();
}

class _EditPageState extends State<EditPage> {
  List<Widget> movableTextWidgets = [];

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.ltr,
      child: Scaffold(
        backgroundColor: Colors.white.withOpacity(0.9),
        body: SafeArea(
          child: KeyboardVisibilityBuilder(
            builder: (context, isKeyboardVisible) {
              return Center(
                child: Stack(
                  alignment: isKeyboardVisible
                      ? Alignment.topCenter
                      : Alignment.center,
                  children: [
                    Hero(
                      tag: "image1",
                      child: AspectRatio(
                        aspectRatio: 5 / 7,
                        child: Padding(
                          padding: isKeyboardVisible
                              ? const EdgeInsets.symmetric(
                                  horizontal: 30, vertical: 30)
                              : const EdgeInsets.symmetric(
                                  horizontal: 20, vertical: 20),
                          child: Container(
                            width: double.infinity,
                            height: double.infinity,
                            decoration: BoxDecoration(
                              boxShadow: const [
                                BoxShadow(
                                  blurRadius: 4,
                                ),
                              ],
                              image: DecorationImage(
                                fit: BoxFit.cover,
                                image: AssetImage("images/2.png"),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                    ...movableTextWidgets,
                  ],
                ),
              );
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.lightGreenAccent,
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(50.0)),
          ),
          foregroundColor: Colors.black,
          onPressed: () {
            _addMovableTextBox();
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }

  void _addMovableTextBox() {
    setState(() {
      movableTextWidgets.add(MovableTextBox());
    });
  }
}

class MovableTextBox extends StatefulWidget {
  @override
  _MovableTextBoxState createState() => _MovableTextBoxState();
}

const ballDiameter = 15.0;

class _MovableTextBoxState extends State<MovableTextBox> {
  double width = 200.0;
  double height = 80.0;
  double top = 200;
  double left = 100;
  TextEditingController textController = TextEditingController();
  GlobalKey<_TextFieldState> textFieldKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned(
          top: top,
          left: left,
          child: GestureDetector(
            onPanUpdate: (details) {
              setState(() {
                top += details.delta.dy;
                left += details.delta.dx;
              });
            },
            child: Container(
              width: width,
              height: height,
              decoration: BoxDecoration(
                color: Colors.transparent,
                border: Border.all(
                  width: 2,
                  color: Colors.black,
                ),
                borderRadius: BorderRadius.circular(0.0),
              ),
              child: Center(
                child: _TextField(
                  key: textFieldKey,
                  controller: textController,
                ),
              ),
            ),
          ),
        )
      ],
    );
  }
}

class _TextField extends StatefulWidget {
  const _TextField({Key? key, required this.controller}) : super(key: key);
  final TextEditingController controller;

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

class _TextFieldState extends State<_TextField> {
  late double fontSize;

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: widget.controller,
      style: TextStyle(fontSize: fontSize),
      decoration: InputDecoration(
        hintText: "Enter text",
        helperStyle: TextStyle(color: Colors.black),
        border: InputBorder.none,
      ),
      textAlign: TextAlign.center,
    );
  }

  void updateFontSize(double newSize) {
    setState(() {
      fontSize = newSize;
    });
  }
}

The KeyboardVisibilityBuilder widget is used to rebuild the UI based on the visibility of the keyboard. I replaced the TextField widget with a custom _TextField widget that extends StatefulWidget. The _TextField widget has a key parameter to allow access to its state, and I also modified the updateFontSize method to directly update the font size in the _TextFieldState. Feel free to ask your questions if you have any doubts.