See blank white page after adding row in column - flutter

Question

I want to create a login page. In this page, I need to have "forgot your password" and "remember me" in a same line, so I used row. When I hot reload it, it shows me a blank, white page.
I tried a row in container and adding that container to my column and still having that black page.
It has no problem if I add them normally (in two line), but I want them in a same line.
(If you have any suggestion for better and cleaner code, please tell me. I accept any suggestion)
Here is my code after a lot of changes:
import 'package:flutter/material.dart';
const List<String> list = <String>['one', 'two'];
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
get value => null;
#override
Widget build(BuildContext context) {
final logo = Image.asset(
'assets/logo.png',
height: 200,
width: 200,
);
final user = Container(
margin: const EdgeInsets.only(left: 40, top: 20, right: 40, bottom: 10),
child: const Directionality(
textDirection: TextDirection.rtl,
child: TextField(
decoration: InputDecoration(
labelText: 'Username',
floatingLabelAlignment: FloatingLabelAlignment.center,
border: UnderlineInputBorder(),
suffixIcon: Icon(
Icons.person,
color: Colors.orange,
),
),
)));
final password = Container(
margin: const EdgeInsets.only(left: 40, top: 10, right: 40, bottom: 10),
child: const Directionality(
textDirection: TextDirection.rtl,
child: TextField(
decoration: InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Password',
suffixIcon: Icon(
Icons.lock,
color: Colors.orange,
),
),
)));
final forgetting = TextButton(
onPressed: null,
style: TextButton.styleFrom(
primary: Colors.red,
),
child: const Text(
'Forgotten password',
style: TextStyle(color: Colors.red),
),
);
final rememberMe = CheckboxListTile(
value: false,
onChanged: (Text) {
print('text');
},
title: Text('/ remember me'),
);
DropdownButton static = DropdownButton(
items: const [
DropdownMenuItem(child: Text('text1')),
DropdownMenuItem(child: Text('text2'))
],
onChanged: (value) {},
);
final enterButton = Container(
margin: const EdgeInsets.only(left: 40, right: 40, top: 0, bottom: 10),
width: double.infinity,
child: TextButton(
onPressed: null,
style: TextButton.styleFrom(
backgroundColor: Colors.orange,
),
child: const Text('Enter')));
final rules = Row(
mainAxisAlignment: MainAxisAlignment.end,
children: const [
Checkbox(
value: false,
onChanged: null,
checkColor: Colors.orange,
),
Text('Rules')
],
);
final fingerPrint = FloatingActionButton(
onPressed: () {},
backgroundColor: const Color.fromRGBO(255, 165, 0, 0.3),
child: const Icon(Icons.fingerprint, color: Colors.orange, size: 50),
);
const version = Text(
'Version: 1.4.7',
style: TextStyle(color: Colors.orange),
);
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
logo,
user,
password,
Container(
child: Row(
children: [rememberMe, forgetting],
)),
enterButton,
rules,
fingerPrint,
const Spacer(),
version
],
)),
);
}
}

Answer 1

Just Wrap the Children of the Row in an Expanded or Flexible widget
.........
password,
Row(
children: [Expanded(child: rememberMe), Expanded(child: forgetting)],
),
enterButton,
.........