인공지능 공부/Flutter

플러터 다트(dart) - Login 화면 만들기 (2022.04.29)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Dice game',
      home: LogIn(),
    );
  }
}

class LogIn extends StatefulWidget {
  @override
  State<LogIn> createState() => _LogInState();
}

class _LogInState extends State<LogIn> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Log in'),
        backgroundColor: Colors.redAccent,
        centerTitle: true,
        leading: IconButton(
            icon: Icon(Icons.menu),
            onPressed: (){}
        ),
        actions: <Widget>[
          IconButton(
              icon: Icon(Icons.search),
              onPressed: (){}
          )
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Padding(padding: (EdgeInsets.only(top: 50)),
            ),
            Center(
              child: Image(
                image: AssetImage('image/mypic.jpg'),
                width: 170,
                height: 190,
              ),
            ),
            Form(child: Theme(
              data: ThemeData(
                primaryColor: Colors.teal,
                inputDecorationTheme: InputDecorationTheme(
                  labelStyle: TextStyle(
                    color: Colors.teal,
                    fontSize: 15.0
                  )
                ),
              ),
              child: Container(
                padding: EdgeInsets.all(40.0),
                child: Column(
                  children: [
                  TextField(
                    decoration: InputDecoration(
                      labelText: 'Enter "ID"'
                    ),
                    keyboardType: TextInputType.emailAddress,
                  ),
                    TextField(
                      decoration: InputDecoration(
                          labelText: 'Enter "Password"'
                      ),
                      keyboardType: TextInputType.text,
                      obscureText: true,
                    ),
                    SizedBox(
                      height: 40.0,
                    ),
                    ButtonTheme(
                      minWidth: 100.0 ,
                        height: 50.0,
                        child: RaisedButton(
                            color: Colors.orangeAccent,
                              child: Icon(
                                Icons.arrow_forward,
                              color: Colors.white,
                              size: 35.0,
                              ),
                            onPressed: (){})
                    )
                  ],
                ),
              ),),
            ),
          ],
        ),
      ),
    );
  }
}