Basic Flutter

slide ini hanya sebagai jejak catatan saja untuk mempelajari flutter dari berbagai sumber

Instalasi by idrcorner

Hello Word

import 'package:flutter/material.dart';

void main(){
  runApp(new MaterialApp(
    home: new Welcome(),
  ));
}

class Welcome extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      body:
        new Center(
          child: new Text("Belajar Flutter"),
        )
    );
  }
}

with style

import 'package:flutter/material.dart';

void main(){
  runApp(new MaterialApp(
    home: new HalamanSatu(),
  ));
}

class HalamanSatu extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body:
        new Center(
          child: new Container(
            color: Colors.blue[900],
            width: 200.0,
            height: 100.0,
            child: new Center(
              child: new Icon(Icons.android, color: Colors.yellow, size: 70.0,)
            ),
          ),
        )
    );
  }
}

App Bar, Row & Col

import 'package:flutter/material.dart';
void main(){
  runApp(new MaterialApp(
    home: new HalamanSatu(),
  ));
}

class HalamanSatu extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.yellow[200],

      appBar: new AppBar(
        backgroundColor: Colors.red[800],
        leading: new Icon(Icons.home),
        title: new Center(
          child: new Text("MALEA ENERGY"),
        ),
        actions: <Widget>[
          new Icon(Icons.search)
        ],
      ),
      
      body: new Container(
        child: new Column(
          children: <Widget>[
            new Icon(Icons.local_pizza, size: 70.0,color: Colors.red,),

            new Row(
              children: <Widget>[
                new Icon(Icons.donut_large,size: 70.0, color: Colors.red,),
                new Icon(Icons.donut_large,size: 70.0, color: Colors.red,),
                new Icon(Icons.donut_large,size: 70.0, color: Colors.red,),
              ],
            ),
            new Icon(Icons.cake,size: 70.0, color: Colors.red,),
          ],
        )
      ),

    );
  }
}

Card & Parsing Data

import 'package:flutter/material.dart';

void main(){
  runApp(new MaterialApp(
    title: "card & parsing",
    home: new HalSatu(),
  ));
}

class HalSatu extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Card & Parsing"),
      ),
      
      body: new Container(
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            new CardSaya(icon: Icons.home, teks: "Home", warnaIcon: Colors.brown,),
            new CardSaya(icon: Icons.favorite, teks: "Favorite", warnaIcon: Colors.pink,),
            new CardSaya(icon: Icons.place, teks: "Place", warnaIcon: Colors.blue,),
            new CardSaya(icon: Icons.settings, teks: "Setting", warnaIcon: Colors.black,),

          ],
        ),
      ),
    );
  }
}

class CardSaya extends StatelessWidget{

  CardSaya({this.icon,this.teks,this.warnaIcon});

  final IconData icon;
  final String teks;
  final Color warnaIcon;

  @override
  Widget build(BuildContext context) {
    return new Container(
      padding: new EdgeInsets.all(10.0),
      child: new Card(
        child:
        new Column(
          children: <Widget>[
            new Icon(
              icon,
              size: 50.0,
              color: warnaIcon,),
            new Text(
              teks,
              style: new TextStyle(fontSize: 20.0),)
          ],
        ),
      ),
    );
  }
}

Navigation & Route

import 'package:flutter/material.dart';
import 'package:navigation/main.dart';

void main(){
  runApp(new MaterialApp(
    home: new HalSatu(),
    title: "Navigation",
    routes: <String,WidgetBuilder>{
      '/HalSatu' : (BuildContext context) => new HalSatu(),
      '/HalDua' : (BuildContext context) => new HalDua(),
    },
  ));
}

class HalSatu extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("MUSIC"),),
      body: new Center(
        child: new
        IconButton(
            icon: new Icon(Icons.headset,size: 50.0,),
            onPressed:(){
              Navigator.pushNamed(context, '/HalDua');
            },
        ),
      ),
    );
  }
}

class HalDua extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("SPEAKER"),
        backgroundColor: Colors.red,
        ),
      body: new Center(
        child: new
        IconButton(
          icon: new Icon(Icons.speaker,size: 50.0,color: Colors.red,),
          onPressed: (){
            Navigator.pushNamed(context, '/HalSatu');
          },
        ),
      ),
    );
  }
}

Tab Bar

import 'package:flutter/material.dart';

import './hal_komputer.dart' as komputer;
import './hal_radio.dart' as radio;
import './hal_smartphone.dart' as smartphone;
import './hal_headset.dart' as headset;


void main(){
  runApp(new MaterialApp(
    title: "Tab Bar",
    home: new Home(),
  ));
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {

  TabController controller;

  @override
  void initState() {
    controller = new TabController(length: 4, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          backgroundColor: Colors.red[400],
          title: new Text("Daftar Elektronik"),
          bottom: new TabBar(
            controller: controller,
            tabs: <Widget>[
              new Tab(icon: new Icon(Icons.computer),text:"Komputer",),
              new Tab(icon: new Icon(Icons.headset),text:"Headset",),
              new Tab(icon: new Icon(Icons.radio),text:"Radio",),
              new Tab(icon: new Icon(Icons.smartphone),text:"Smartphone",),
            ],
          ),
        ),

      body: new TabBarView(
        controller: controller,
        children: <Widget>[
          new komputer.Komputer(),
          new headset.Headset(),
          new radio.Radio(),
          new smartphone.Smartphone(),
        ],
      ),

      bottomNavigationBar: new Material(
        color: Colors.red[400],
        child: new TabBar(
          controller: controller,
          tabs: <Widget>[
            new Tab(icon: new Icon(Icons.computer),text:"Komputer",),
            new Tab(icon: new Icon(Icons.headset),text:"Headset",),
            new Tab(icon: new Icon(Icons.radio),text:"Radio",),
            new Tab(icon: new Icon(Icons.smartphone),text:"Smartphone",),
          ],
        ),
      ),
    );
  }
}

hal_smartphone.dart

import 'package:flutter/material.dart';

class Smartphone extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: new Column(
        children: <Widget>[
          new Text("SMARTPHONE", style: new TextStyle(fontSize: 30.0),),
          new Padding(padding: new EdgeInsets.all(20.0)),
          new Image(image: new NetworkImage("https://cdn.idntimes.com/content-images/post/20181106/maxresdefault-1-a66badbc9b2ca219fd5e69c0bb06b979_600x400.jpg"))
        ],
      ),
    );
  }
}

hal_headset.dart

import 'package:flutter/material.dart';

class Headset extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: new Column(
        children: <Widget>[
          new Text("HEADSET", style: new TextStyle(fontSize: 30.0),),
          new Padding(padding: new EdgeInsets.all(20.0)),
          new Image.asset("img/headset.jpg", width:200.0)
        ],
      ),
    );
  }
}

hal_radio.dart

import 'package:flutter/material.dart';

class Radio extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: new Column(
        children: <Widget>[
          new Text("RADIO", style: new TextStyle(fontSize: 30.0),),
          new Padding(padding: new EdgeInsets.all(20.0)),
          new Image(image : new NetworkImage("https://www.panasonic.com/content/dam/pim/mi/en/RF/RF-562/RF-562DDGC/RF-562DDGC-Product_ImageGlobal-1_mi_en.png"))
        ],
      ),
    );
  }
}

hal_smartphone.dart

import 'package:flutter/material.dart';

class Smartphone extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: new Column(
        children: <Widget>[
          new Text("SMARTPHONE", style: new TextStyle(fontSize: 30.0),),
          new Padding(padding: new EdgeInsets.all(20.0)),
          new Image(image: new NetworkImage("https://cdn.idntimes.com/content-images/post/20181106/maxresdefault-1-a66badbc9b2ca219fd5e69c0bb06b979_600x400.jpg"))
        ],
      ),
    );
  }
}

List View Builder

main.dart

import 'dart:io';

import 'package:flutter/material.dart';

import './hal_home.dart' as hal_home;
import './hal_about.dart' as hal_about;

void main() {
  runApp(new MaterialApp(
    title: "Tab Bar",
    home: new Home(),
  ));
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
  TabController controller;

  @override
  void initState() {
    controller = new TabController(length: 2, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        backgroundColor: Colors.red[400],
        title: new Text("Eudeka - OSG4"),
        leading: Icon(Icons.android),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.local_bar),
            onPressed: (){

            },
          )
        ],
      ),
      body: new TabBarView(
        controller: controller,
        children: <Widget>[
          new hal_home.Home(),
          new hal_about.About(),
        ],
      ),
      bottomNavigationBar: new Material(
        color: Colors.red[400],
        child: new TabBar(
          controller: controller,
          tabs: <Widget>[
            new Tab(
              icon: new Icon(Icons.home),
              text: "Home",
            ),
            new Tab(
              icon: new Icon(Icons.people),
              text: "About",
            ),
          ],
        ),
      ),
      floatingActionButton: Builder(builder: (context) {
        return FloatingActionButton(
          child: Icon(Icons.exit_to_app),
          onPressed: () {
            return showDialog(
                context: context,
                barrierDismissible: false,
                builder: (context) {
                  return AlertDialog(
                    title: Text('Peringatan'),
                    content: Text('Apakah Yakin akan keluar?'),
                    actions: <Widget>[
                      FlatButton(
                        child: Text('TIDAK'),
                        onPressed: () {
                          Navigator.pop(context);
                        },
                      ),
                      FlatButton(
                        child: Text('YA'),
                        onPressed: () {
                          exit(0);
                        },
                      )
                    ],
                  );
                });
          },
        );
      }),
    );
  }
}

hal_home.dart

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  final List<String> titles = [
    'Flutter',
    'react native',
    'java',
    'kotlin',
    'swift'
  ];

  final List<String> subtitles = [
    'flutter adalah SDK untuk pengembangan aplikasi mobile yang dikembangkan oleh Google',
    'React Native adalah sebuah framework javascript yang di kembang kan oleh facebook dan memungkin kan kita membuat aplikasi mobile android atau ios menggunakan teknologi web',
    'Java adalah bahasa pemrograman yang dapat dijalankan di berbagai komputer termasuk telepon genggam',
    'Google kini telah memberikan dukungan penuh untuk bahasa pemrograman Kotlin. Android Studio 3.0 yang akan segera diluncurkan dalam waktu dekat nantinya akan langsung mendukung bahasa pemrograman Kotlin.',
    'Swift adalah bahasa pemrograman objek fungsional untuk pengembangan iOS dan OS X yang dibuat oleh Apple.'
  ];


  final List<String> images = [
    'https://cdn-images-1.medium.com/max/2400/1*73IgUxPfyXUKZAaIXgutrw.png',
    'https://ds1hty5qgiz73.cloudfront.net/wp-content/uploads/2018/12/2018-12-06.jpg',
    'https://cdn-images-1.medium.com/max/1200/1*E4CO83SmCCrvRrge7U3Ahw.jpeg',
    'https://i.udemycdn.com/course/750x422/2099848_c9db.jpg',
    'http://www.developersacademy.org/blog/wp-content/uploads/2018/05/wc-swift.jpg'
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
        child: ListView.builder(
          itemCount: titles.length,
          itemBuilder: (context, index) {
            return Card(
                child: ListTile(
                  title: Text(titles[index],style: new TextStyle(fontSize: 20.0)),
                  subtitle: Text(subtitles[index],style: new TextStyle(fontSize: 15.0)),
                  leading: Image.network(images[index])
                ),
            );
          },
        )
    );
  }


}

hal_about.dart

import 'package:flutter/material.dart';

class About extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: new Column(
        children: <Widget>[
          new Container(
             child: Card(
              margin: EdgeInsets.all(10),
               child: Image(image : new NetworkImage("https://pbs.twimg.com/profile_images/2250340911/577168_3422605636996_1025859888_32529160_1367636733_n_400x400.jpg")),
             ),
          ),

          new Container(
            margin: EdgeInsets.all(5),
            child: new Column(
              children: <Widget>[
                Text("Kode : OSG04010", style: new TextStyle(fontSize: 20.0),),
                Text("Nama : Ilham Maulana", style: new TextStyle(fontSize: 20.0),),
                Text("Email : k4ilham@gmail.com", style: new TextStyle(fontSize: 20.0),),
              ],
            ),
          ),

        ],
      ),
    );
  }
}