My Flutter Web application is rendering perfectly when I run it on a desktop browser as seen below. I have not used the full width of the screen for the game since the layout looks better as a narrow strip similar to a mobile in portrait mode. However, when I reduce the screen width to that of a mobile browser, only the appbar renders and the rest of the game does not render as seen in the second image. I tried all the options suggested in this SOF issue but none of them have worked: Flutter web app not working on mobile browser. How to debug the error if running flutter code on mobile browser?
Here is the code that I have:
void main() async {
WidgetsFlutterBinding.ensureInitialized();
app = await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
auth = FirebaseAuth.instanceFor(app: app);
runApp(const ProviderScope(child: MyApp()));
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'WORDSUITE',
theme: ThemeData(
primaryColor: const Color(0xffc3e1f3),
textTheme: GoogleFonts.interTextTheme(),
),
home: const FrontPage(),
routes: {
'/result': (context) => const ResultScreen(),
});
}
}
class _FrontPageState extends ConsumerState<FrontPage> {
...
...
@override
Widget build(context) {
return Scaffold(
backgroundColor: Colors.black54,
appBar: const CustomAppBar(),
body: (userScore.isInit)
? const Center(child: Loading())
: Center(
child: Container(
width: userScore.boxwidth,
alignment: Alignment.center,
decoration: const BoxDecoration(color: Color(0xffe5e1da)),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(height: 20),
Consumer(builder: (BuildContext context, WidgetRef ref, _) {
// ignore: prefer_const_constructors
return Hints();
}),
const SizedBox(height: 20),
FittedBox(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(width: 10),
GestureDetector(
onTap: () {
setState(() {
userScore.setActiveBoxValue(0);
});
},
child: WordBox(
wordList.todaysword?.firstpuzzle ?? [],
userScore.activeBox[0],
0,
refresh,
)),
const SizedBox(width: 5),
GestureDetector(
onTap: () {
setState(() {
userScore.setActiveBoxValue(1);
});
},
child: WordBox(
wordList.todaysword?.secondpuzzle ?? [],
userScore.activeBox[1],
1,
refresh)),
const SizedBox(width: 5),
GestureDetector(
onTap: () {
setState(() {
userScore.setActiveBoxValue(2);
});
},
child: WordBox(
wordList.todaysword?.thirdpuzzle ?? [],
userScore.activeBox[2],
2,
refresh)),
const SizedBox(width: 10),
],
),
),
const SizedBox(height: 20),
SizedBox(
// height: MediaQuery.of(context).size.height * 0.12,
width: userScore.boxwidth * 0.95,
child: ClipRRect(
borderRadius: BorderRadius.circular(12.0),
child: Container(
padding: const EdgeInsets.all(20.0),
alignment: Alignment.bottomCenter,
decoration:
const BoxDecoration(color: Color(0xfffbf9f1)),
child: FlexiText(
wordList.todaysword?.fourthpuzzle ?? '',
userScore.activeBox[3],
3,
refresh),
),
),
),
const SizedBox(height: 30),
FittedBox(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(
onPressed: () => activateHint(HintType.sp),
// style: OutlinedButton.styleFrom(
// backgroundColor:
// const Color.fromARGB(113, 60, 181, 218),
// ),
child: Stack(
alignment: Alignment.center,
children: [
Image.asset('assets/images/btn.png'),
const Text(
'#L',
style: TextStyle(
fontSize: 28, color: Colors.black),
)
],
),
),
TextButton(
onPressed: () => activateHint(HintType.ltr),
child: Stack(
alignment: Alignment.center,
children: [
Image.asset('assets/images/btn.png'),
const Text(
'LTR',
style: TextStyle(
fontSize: 28, color: Colors.black),
)
],
),
),
TextButton(
onPressed: () => activateHint(HintType.ba),
child: Stack(
alignment: Alignment.center,
children: [
Image.asset('assets/images/btn.png'),
const Text(
'B/A',
style: TextStyle(
fontSize: 28, color: Colors.black),
)
],
),
),
TextButton(
onPressed: () => rvlHint(),
child: Stack(
alignment: Alignment.center,
children: [
Image.asset('assets/images/btn.png'),
const Text(
'RVL',
style: TextStyle(
fontSize: 28, color: Colors.black),
)
],
),
),
],
),
),
const SizedBox(height: 80),
MyKeyboard(
onTextInput: (myText) {
_insertText(myText);
},
onBackspace: () {
_backspace();
},
onEnter: () {
_onEnter();
},
),
],
),
),
),
);
Can someone please guide me as to what might be going wrong? One other thing I would like to mention is this. If I resize the window from desktop size to mobile size, the application resizes just fine. However if I set the browser to mobile size using F12 and reload the app, the game does not render (as shown in the second image). I am not getting any error or any overflow of pixels in the debug logs so not getting a clue as to where the renderer is failing
MediaQuery Class could be used to create responsive layout class. refer this website geekforgeeks.org I have seen that your did not used MediaQuery class even once