인스타그램 클론 - 1 에 이어서 2를 시작한다.
인스타그램 클론 - 1 링크 : https://velog.io/@cho2kkh/Flutter-%EC%9D%B8%EC%8A%A4%ED%83%80%EA%B7%B8%EB%9E%A8-%ED%81%B4%EB%A1%A0-1
플러그인 설치 : flutter_svg
assets 폴더에 접근하기 위해 pubspec.yaml 파일 수정
assets:
- assets/ic_instagram.svg
lib/widgets/text_field_input.dart
import 'package:flutter/material.dart';
class TextFieldInput extends StatelessWidget {
final TextEditingController textEditingController;
final bool isPass;
final String hintText;
final TextInputType textInputType;
const TextFieldInput({
Key? key,
required this.textEditingController,
this.isPass = false,
required this.hintText,
required this.textInputType,
}) : super(key: key);
Widget build(BuildContext context) {
final inputBorder =
OutlineInputBorder(borderSide: Divider.createBorderSide(context));
return TextField(
controller: textEditingController,
decoration: InputDecoration(
hintText: hintText,
border: inputBorder,
focusedBorder: inputBorder,
enabledBorder: inputBorder,
filled: true,
contentPadding: const EdgeInsets.all(8),
),
keyboardType: textInputType,
obscureText: isPass,
);
}
}
lib/screens/login_screen.dart
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:test_project/utils/colors.dart';
import 'package:test_project/widgets/text_field_input.dart';
class LoginScreen extends StatefulWidget {
const LoginScreen({Key? key}) : super(key: key);
State<LoginScreen> createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
final TextEditingController _emailController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
void dispose() {
super.dispose();
_emailController.dispose();
_passwordController.dispose();
}
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 32),
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center, // 컬럼 가운데 정렬
children: [
Flexible(flex: 2, child: Container()),
// svg image
SvgPicture.asset(
'assets/ic_instagram.svg',
color: primaryColor,
height: 64,
),
const SizedBox(height: 64),
// text field input for emial
TextFieldInput(
textEditingController: _emailController,
hintText: 'Enter your email',
textInputType: TextInputType.emailAddress,
),
const SizedBox(height: 24),
// text field input for password
TextFieldInput(
textEditingController: _passwordController,
hintText: 'Enter your password',
textInputType: TextInputType.text,
isPass: true,
),
const SizedBox(height: 24),
// button login
InkWell(
onTap: () {},
child: Container(
width: double.infinity,
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(vertical: 12),
decoration: const ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(4),
),
),
color: blueColor),
child: const Text('Log in'),
),
),
const SizedBox(height: 12),
Flexible(flex: 2, child: Container()),
// Transitioning to signing up
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.symmetric(vertical: 8),
child: const Text("Don't have an account?"),
),
Container(
padding: const EdgeInsets.symmetric(vertical: 8),
child: const Text(
" Sign up",
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
],
)
],
),
),
),
);
}
}
lib/screens/signup_screen.dart
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:test_project/utils/colors.dart';
import 'package:test_project/widgets/text_field_input.dart';
class SignupScreen extends StatefulWidget {
const SignupScreen({Key? key}) : super(key: key);
State<SignupScreen> createState() => _SignupScreenState();
}
class _SignupScreenState extends State<SignupScreen> {
final TextEditingController _emailController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
final TextEditingController _bioController = TextEditingController();
final TextEditingController _usernameController = TextEditingController();
void dispose() {
super.dispose();
_emailController.dispose();
_passwordController.dispose();
_bioController.dispose();
_usernameController.dispose();
}
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 32),
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center, // 컬럼 가운데 정렬
children: [
Flexible(flex: 2, child: Container()),
// svg image
SvgPicture.asset(
'assets/ic_instagram.svg',
color: primaryColor,
height: 64,
),
const SizedBox(height: 64),
// circular widget to accept and show our selected file
Stack(
children: [
const CircleAvatar(
radius: 64,
backgroundImage: NetworkImage(
'https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=49ed3252c0b2ffb49cf8b508892e452d'),
),
Positioned(
bottom: -10,
left: 80,
child: IconButton(
onPressed: () {},
icon: const Icon(Icons.add_a_photo),
),
),
],
),
const SizedBox(height: 24),
// text field input for username
TextFieldInput(
textEditingController: _usernameController,
hintText: 'Enter your username',
textInputType: TextInputType.text,
),
const SizedBox(height: 24),
// text field input for email
TextFieldInput(
textEditingController: _emailController,
hintText: 'Enter your email',
textInputType: TextInputType.emailAddress,
),
const SizedBox(height: 24),
// text field input for password
TextFieldInput(
textEditingController: _passwordController,
hintText: 'Enter your password',
textInputType: TextInputType.text,
isPass: true,
),
const SizedBox(height: 24),
TextFieldInput(
textEditingController: _bioController,
hintText: 'Enter your bio',
textInputType: TextInputType.text,
),
const SizedBox(height: 24),
// button login
InkWell(
onTap: () {},
child: Container(
width: double.infinity,
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(vertical: 12),
decoration: const ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(4),
),
),
color: blueColor),
child: const Text('Sign up'),
),
),
const SizedBox(height: 12),
Flexible(flex: 2, child: Container()),
// Transitioning to signing up
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.symmetric(vertical: 8),
child: const Text("Don't have an account?"),
),
Container(
padding: const EdgeInsets.symmetric(vertical: 8),
child: const Text(
" Sign up",
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
],
)
],
),
),
),
);
}
}