Flutter Starter Kit Template for Login to Dashboard Sample Code

   

Hai, Berikut saya berikan kode script yang biasanya diawal project kita bingung mulai dari mana.

Flutter adalah sebuah framework aplikasi mobil sumber terbuka yang diciptakan oleh Google. Flutter digunakan dalam pengembangan aplikasi untuk sistem operasi Android, iOS, Windows, Linux, MacOS, serta menjadi metode utama untuk membuat aplikasi Google Fuchsia.

import 'package:flutter/material.dart';
void main() {
  runApp(LoginApp(
  ));
}

class LoginApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'JUDUL APLIKASI',
      theme: ThemeData(
        primarySwatch: Colors.black,
      ),
      home: MyHomePage(title: 'Login'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter = _counter + 3;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),

      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // START MENU
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[

            Padding(
              padding: EdgeInsets.only(left: 50.0, right: 50.0),
              child: TextFormField(
                decoration: const InputDecoration(
                  hintText: 'User ID',
                ),
                validator: (value) {
                  return null;
                },
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 50.0, right: 50.0),
              child: TextFormField(
                decoration: const InputDecoration(
                  hintText: 'Password',
                ),
                validator: (value) {
                  return null;
                },
              ),
            ),

            Padding(
              padding: EdgeInsets.only(left: 50.0, right: 50.0),
              child: RaisedButton(
                color: Colors.blue,
                child: Text(
                  "LOGIN",
                  style: TextStyle(color: Colors.white),
                ),
                onPressed: () {
                  showDialog(
                      context: context,
                      builder: (_) => new AlertDialog(
                        title: new Text("Material Dialog"),
                        content: new Text("Hey! I'm Coflutter!"),
                        actions: <Widget>[
                          FlatButton(
                            child: Text('Close me!'),
                            onPressed: () {
                              Navigator.push(
                                context,
                                MaterialPageRoute(builder: (context) => DashboardPage()),
                              );
                            },
                          )
                        ],
                      ));
                },
              ),
            )
          ],
        ),
      ),
       // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

}

class DashboardPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Dashboard"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Kembali'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

Hasil
Tampilan Login Flutter

Jika Login di klik masuk ke dashboard

   

Wahyu Amaldi, M.Kom has written 209 articles

Hallo Pembaca,
Saya merupakan konsultan di dunia SAP dan merupakan Spesialis .Net Programming.
Saya gemar berbagi pengalaman mengenai SAP & Dunia Programming, dan jika ada sesuatu yang perlu ditanyakan, bisa hubungi saya di email berikut ini:

Email 1 : wahyu.amaldi@outlook.com
Email 2 : wahyu.amaldi@ilmuprogram.com

Semoga Artikel yang Anda baca di website ini berguna dan dapat membantu Anda dalam menemukan solusi.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>