Flutter 끄적이기 - LoginScreen
필요하신 분 가져다가 쓰세요 :)
[영상]
1
2
3
LoginPage
1. forcing Landscape Mode
2. Keyboard Raiser
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
]).then((_) {
runApp(MyApp());
});
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
// Use resizeToAvoidBottomInset to avoid the UI being covered by the keyboard
resizeToAvoidBottomInset: true,
body: GestureDetector(
onTap: () {
// Dismiss the keyboard when the user taps outside of the TextField
FocusScope.of(context).unfocus();
},
child: SingleChildScrollView(
child: Center(
child: ConstrainedBox( // Use ConstrainedBox to limit the maximum width of the column
constraints: BoxConstraints(maxWidth: 340), // Maximum width from the design
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.asset(
'assets/images/company_logo.png', // Your asset logo image
width: 200, // Set your image width
height: 100, // Set your image height
),
Text(
'COMPANY NAME',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 16), // Adjust the height for proper spacing
const TextField(
decoration: InputDecoration(
hintText: 'ID(Email)',
border: OutlineInputBorder(), // Add a border to the TextField
prefixIcon: Icon(Icons.email), // Add an email icon as the prefix
),
),
SizedBox(height: 16), // Adjust the height for proper spacing
const TextField(
obscureText: true, // Make sure the password is obscured
decoration: InputDecoration(
hintText: 'Password',
border: OutlineInputBorder(), // Add a border to the TextField
prefixIcon: Icon(Icons.lock), // Add a lock icon as the prefix
),
),
SizedBox(height: 24), // Adjust the height for proper spacing
SizedBox(
width: double.infinity, // Make the button expand to the width of the column
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue[800], // Use a dark blue color for the button
),
onPressed: () {},
// white color for the text
child: const Text('Log in', style: TextStyle(color: Colors.white)),
),
),
SizedBox(height: 24),
// Add two buttons for Sign Up and Find Password
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextButton(
onPressed: () {
// TODO: Implement your sign up logic
},
child: Text('회원가입'),
),
TextButton(
onPressed: () {
// TODO: Implement your find password logic
},
child: Text('비밀번호 찾기'),
),
],
),
],
),
),
),
),
),
);
}
}
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.