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',
),
),
)
],
)),
],
)),
CodePudding user response：
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