How can I make my Footer responsive using Flutter?

Issue

I am building my footer for my website using Flutter and some basic flutter-animation. This footer (and its animation) work(s) fine when running on desktop but the same footer is not responding when running on a mobile device.

How can i fix this issue that I have (with my non responsive footer on mobile)?

Below you can find the code of my footer:

Container(
                color:const Color(0xFF3B3B4D) ,
                width: MediaQuery.of(context).size.width,
                padding:
                    const EdgeInsets.symmetric(horizontal: 30, vertical: 10),
                child: Row(
                  children: [
                    Expanded(
                        child: Column(
                      children: [
                        TextButton(
                          onPressed: () {},
                          child: const Text("Escorts",
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Poppins',
                              )),
                        ),
                        TextButton(
                          onPressed: () {},
                          child: const Text("Agenturen & Clubs",
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Poppins',
                              )),
                        ),
                        TextButton(
                          onPressed: () {},
                          child: const Text("Inserieren",
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Poppins',
                              )),
                        ),
                        TextButton(
                          onPressed: () {},
                          child: const Text("Werben",
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Poppins',
                              )),
                        ),
                        TextButton(
                          onPressed: () {},
                          child: const Text("Blog",
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Poppins',
                              )),
                        ),
                      ],
                    )),
                    Expanded(
                        child: Column(
                      children: [
                        TextButton(
                          onPressed: () {},
                          child: const Text("Login",
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Poppins',
                              )),
                        ),
                        TextButton(
                          onPressed: () {},
                          child: const Text("Registrieren",
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Poppins',
                              )),
                        ),
                        TextButton(
                          onPressed: () {},
                          child: const Text("",
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Poppins',
                              )),
                        ),
                        TextButton(
                          onPressed: () {},
                          child: const Text("",
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Poppins',
                              )),
                        ),
                        TextButton(
                          onPressed: () {},
                          child: const Text("",
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Poppins',
                              )),
                        ),
                      ],
                    )),
                    Expanded(
                        child: Column(
                      children: [
                        TextButton(
                          onPressed: () {},
                          child: const Text(
                            "DSGVO",
                            style: TextStyle(
                              color: Colors.white,
                              fontFamily: 'Poppins',
                            ),
                          ),
                        ),
                        TextButton(
                          onPressed: () {},
                          child: const Text("Impressum",
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Poppins',
                              )),
                        ),
                        TextButton(
                          onPressed: () {},
                          child: const Text("Kontakt",
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Poppins',
                              )),
                        ),
                        TextButton(
                          onPressed: () {},
                          child: const Text("",
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Poppins',
                              )),
                        ),
                        TextButton(
                          onPressed: () {},
                          child: const Text("",
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Poppins',
                              )),
                        ),
                      ],
                    )),
                    Expanded(
                        child: Column(
                      children: const [
                        Text("Newsletter",
                            style: TextStyle(
                              color: Colors.white,
                              fontFamily: 'Poppins',
                            )),
                        SizedBox(
                          height: 10,
                        ),
                        Text(
                            "Lorem ipsum dolor sit amet,\n consectetur adipiscing elit.",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 10,
                              fontFamily: 'Poppins',
                            )),
                        SizedBox(
                          width: 150,
                          height: 80,
                          child: TextField(
                            decoration: InputDecoration(                               
                              filled: true, //<-- SEE HERE
                              fillColor: Colors.white,
                              focusedBorder: OutlineInputBorder(borderSide: BorderSide (width: 1, color: Color(0xFFE51A72)),),
                              hintText: 'E-Mail-Adresse',
                            ),
                          ),
                        )
                      ],
                    )),
                  ],
                )),

img

img2

Solution

sometime you have to write code for each size screen size.

first, try the Wrap widget and use padding & margin for free space between your object.

if that isn’t working, you must write code for each screen size.
first, check the screen size with MediaQuery. check this link for the screen size

Answered By – aminjafari-dev

Answer Checked By – Clifford M. (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *