Ниже приведены несколько способов создания страницы входа с помощью Flutter, а также примеры кода:
Метод 1: использование виджетов Material Design Flutter
import 'package:flutter/material.dart';
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login Page'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Login Form'),
TextField(
decoration: InputDecoration(
labelText: 'Email',
),
),
TextField(
decoration: InputDecoration(
labelText: 'Password',
),
obscureText: true,
),
RaisedButton(
child: Text('Login'),
onPressed: () {
// Perform login logic here
},
),
],
),
),
);
}
}
Метод 2: использование виджетов Flutter’s Cupertino Design (стиль iOS)
import 'package:flutter/cupertino.dart';
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('Login Page'),
),
child: SafeArea(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Login Form'),
CupertinoTextField(
placeholder: 'Email',
),
CupertinoTextField(
placeholder: 'Password',
obscureText: true,
),
CupertinoButton(
child: Text('Login'),
onPressed: () {
// Perform login logic here
},
),
],
),
),
),
);
}
}
Метод 3. Использование индивидуального дизайна
import 'package:flutter/material.dart';
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login Page'),
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Login Form',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 16.0),
TextFormField(
decoration: InputDecoration(
labelText: 'Email',
),
),
SizedBox(height: 16.0),
TextFormField(
decoration: InputDecoration(
labelText: 'Password',
),
obscureText: true,
),
SizedBox(height: 16.0),
RaisedButton(
child: Text('Login'),
onPressed: () {
// Perform login logic here
},
),
],
),
),
);
}
}