You are on page 1of 51

Hero class

import 'package:flutter/material.dart';

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Belajar Routing'),
      ),
      body: InkWell(
        onTap: () {
          Navigator.push(
            context,
            PageRouteBuilder(
              transitionDuration: Duration(seconds: 1),
              pageBuilder: (_, __, ___) => AboutPage(),
            ),
          );
        },
        child: Hero(
          tag: "ContohTag",
          child: Icon(
            Icons.airport_shuttle,
            size: 100.0,
          ),
        ),
      ),
    );
  }
}
class AboutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Halaman Kedua'),
      ),
      body: Center(
        child: InkWell(
          onTap: () {
            Navigator.pop(context);
          },
          child: Hero(
            tag: "ContohTag",
            child: Icon(
              Icons.airport_shuttle,
              size: 100.0,
            ),
          ),
        ),
      ),
    );
  }
}
import 'package:flutter/material.dart';

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Belajar Hero'),
      ),
      body: InkWell(
        onTap: () {
          Navigator.push(
            context,
            PageRouteBuilder(
              transitionDuration: Duration(seconds: 1),
              pageBuilder: (_, __, ___) => AboutPage(),
            ),
          );
        },
        child: Hero(
          tag: "ContohTag",
          child: Icon(
            Icons.airport_shuttle,
            size: 100.0,
          ),
          flightShuttleBuilder: (flightContext, animation, direction, 
fromContext, toContext) {
            if (direction == HeroFlightDirection.push) {
              return Icon(
                Icons.local_airport,
                size: 100.0,
              );
            } else if (direction == HeroFlightDirection.pop) {
              return Icon(
                Icons.local_airport,
                size: 60.0,
              );
            }
          },
        ),
      ),
    );
  }
}

class AboutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Halaman Kedua'),
      ),
      body: Center(
        child: InkWell(
          onTap: () {
            Navigator.pop(context);
          },
          child: Hero(
            tag: "ContohTag",
            child: Icon(
              Icons.home,
              size: 100.0,
            ),
          ),
        ),
      ),
    );
  }
}
Maindart

import 'package:flutter/material.dart';

import 'routes.dart';
void main() {
  runApp(MaterialApp(
    onGenerateRoute: RouteGenerator.generateRoute,
  ));
}

Pixabay-data dart

class ImageData {
  int id;
  String title;
  String author;
  String imageLarge;
  ImageData({this.id, this.title, this.author, this.imageLarge});
  static List<ImageData> pixabay;
  ImageData.init() {
    pixabay = List();
    pixabay.add(
      ImageData(id: 1, title: 'Tupai', author: 'Capri23auto', imageLar
ge: 'data:image/jpeg;base64,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
mYO95v6p2xUEGrleQdb/tZaNQOEzctPqR+
+VLMRixJLrwY9YzfRXYd0kNJ218xf2S16HQU1hczLEwYPPWR91CvhgwydgjcAADLhGv+PV
JuNcRzEhp+VzfMax9fRNxzktnPzPawEZV7xdzNvI/nsisQ3M1vT/KWYJuZ3MTI6c0zebrn
5b8UJzPJwGNNVvCLehainx3vs5cA3lQD1lVUucupLUGh1NytzIGm9FMKlUi6ScVpr1uFHK
pKUARSrIltQFACysY+ElcO+hkMWgKxhQLK6uGJAUnw0P1gYKsKBxCDdXlUVKiF+PojYe7F
3UmYjqlLHyUZSRXApRmBorrHVFUAFvOFDxX0bhrOtqnOFpPhhzgqqxjiTt5oZpU2le2akO
sLhXu1yX5H9imlPh1vmHjJj6LncNULU5wuLJ2nwlSpHVxVP2HHh0D5reo90tw9PI98aH8/
ZNmVM0BxAO4F3fwhMdSa0g8jMb+fLZE9HS35IFp1e+Bzsf8AkP2VXFqh7jZ0bPqbqFN4+J
c/nzIXjT5cSP7f/ERH51TtaInhr42YGbEj3yQi8EdC7ax8nH9/dKqQlo56j23TjB0HOaYH
eiehKnTKLSviPGDdjTodt4iD4pK2qXknnr9Ew4Z2bxFZz3FuUMBs+Wlx5NBF9k/4X2ReGE
ucxpLhY3gdSLenNO6SWIipbesW8Pp5GZjreFe10pnxKixvcNN4LbTo0nmDugKeGO0npZcX
MvJ9E74uSnudFbkJVTV+BOWZ2kDn0SesUccNELio9gdYocq6oVCF2T0iLJ0gi2BD00RTU6
1mpFwC2AsBWAqLlpmkHhVPCJUHsVEGgweQpAkqRpKTGJnSSDyMaCtOV4CqeVF8nZhqiLo9
roCXtep/ESVtGp4EuqKGeUOXqbCl8Eg0msUc6xGGaJYUmKwsWNYvTGRYxEU3xv8AnghmqY
csaNG2GxLWCd+v1WPrh5ynf8uk+dFYQbrPErPJSWBFLCEnqZnzEKjH8OfkzbyU6wzYhN8N
Qa+xAIn7JpnTf2s4wcNewszA5YgQCb8oGsrtuGYWuxoJpPiNAI89bBT4rgw1tMj+l7B11X
XcIfnpNvcCEXwTXbGn8iksRxpxeJJf/wBM8N7sHuZrEyIzSQRHouv7P4cDDg1KbnOc5xLX
tALRNhG1oRowkesoh3D80Q9zY1DTqeqHDSyUK+R1/syFShRywW2cIymQI3EaLkOM9lnuqZ
sM5tJhaA5uQubPMRourHBwHZi+o4zMOeS30TEnu5QNo8EkxW/L19A7xfF6eTcS4bjMM1ji
1tdhc0PLGuzsYT8xbewG4Q3FeEF7M9MS5ozEDV7QLuHMj1heutoiLyk/FODtfDmOLHAyY+
V0m4IT1xp40Z56mqPDyJVa6HjXZ+pQe4lpyZjlI2E2nySGo1Y0Rcm2PV7HoJqvYkaDAvNZ
azqtzlU5IwwMY9XMuljHlGUnqddGMKcxV5VvOq31FDyb6FJPfCErPU3vQtVyaJAj8W6sFR
BkqxhVvFAEfEUhiEI9yrL0eOgHfG6raX51iPAA0rAsWLqKGLTlixAFKYYHVaWLQHp0TPhG
qxYtn2D9Dri3yM/vZ/8ASadmvk/Oa2sVmYh0EZhtVpYsXsGFOWlixMzDSDcsWKbNQr4+wF
hkA+S8W4k0B5gRdYsS0N9ATtVJixYoMwmFpyxYkAgrmLFinfoxlhUHLFikhGVuQ9RYsVZA
qCk1YsVQIvVJWLEIDSxYsWgf/9k='),
    );
    pixabay.add(
      ImageData(id: 2, title: 'Anggur', author: 'NickyPe', imageLarge: 
'https://awsimages.detik.net.id/community/media/visual/2021/09/24/angu
r-langka-di-jepang-ruby-roman-1.jpeg?w=1200'),
    );
    pixabay.add(
      ImageData(id: 3, title: 'Pemandangan', author: 'Sonyuser', image
Large: 'https://blog.tripcetera.com/id/wp-
content/uploads/2020/10/Danau-Toba-edited.jpg'),
    );
    pixabay.add(
      ImageData(id: 4, title: 'Kucing Kuning', author: 'Alexas_Fotos', 
imageLarge: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAA
oHCBYWFRgWFRYYGBgaGBwaGhwYGRgaGhwaGhgaGhgaHB4cIS4lHB4rIRoZJjgmKy8xNTU1
GiQ7QDs0Py40NTEBDAwMEA8QHhISHDQrJCs0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0ND
Q0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0PTQ0NP/AABEIANIA8AMBIgACEQEDEQH/xAAbAAACAwEB
AQAAAAAAAAAAAAADBQIEBgABB//EAD0QAAIBAgQDBgUBBwMDBQAAAAECAAMRBBIhMQVBUQ
YiYXGBkRMyobHwwSNCUnLR4fEHYpIUM4IVFnOTwv/EABgBAAMBAQAAAAAAAAAAAAAAAAAB
AgME/8QAIhEAAgICAwEAAgMAAAAAAAAAAAECESExAxJBUTJhEyJC/9oADAMBAAIRAxEAPw
CkglhBApDoJym4ZBLCLA05YRZSQE0SWFWCpiWVEYHqCFUSKCFSBJNZNVniiFRYAeFLgjqC
PpMxaaxV5TM4lMrsP9xgM9oHWaRNQp8BM1S3mkwWqCJbBoz3bSl+zR+jke4/tKHZy5pi/w
C6SI97VUs2GfwKt9ZmuzVXR155gbeczlsqKtCXHpkxLDl8Rx/9ihh9o3wezDxB9xKXafuV
y3JhTqf8WKN95fwXzen2a36y4iotIl0Om0Jl7p8v0vPcKl8yw9FNLekoAg1seoH1k0E6iL
ovlb20hqawAg4nloVknWgAErJBYYzzJAAWWCK9JaZLSBTygBWyyNvpLLJ+Wg8vl+fn0gNC
RBLCCBQcpZpiQgYVFvLCrBUxLKCWIIiQ4EGsMsAPVEMqwawywJJqsIgkRJpACaxDxZLVD4
6x8Ip42neVuq/rAaYtQbTQcLa6W6GZ5jLmA4oiK1zcjpy15ybpjqxpxWjnpOvVGt5gXH2m
A4A9ndb2ul/
+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
15wJbSy2/TxMYqOqPex0Bv1sL+
+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
nTpSA//2Q=='),
    );
    pixabay.add(
      ImageData(id: 5, title: 'Burung', author: 'Derweg', imageLarge: 
'data:image/jpeg;base64,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
UhpHqIqntGXhGSPNAJnmMAmMgn//2Q=='),
    );
  }
}

Routes.dart

import 'package:flutter/material.dart';
import 'screen.dart';

class RouteGenerator {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    final args = settings.arguments;
    switch (settings.name) {
      case '/':
        return MaterialPageRoute(builder: (_) => HomePage());
      case '/detail':
        return PageRouteBuilder(
          pageBuilder: (_, __, ___) => DetailPage(args),
          transitionDuration: Duration(milliseconds: 700),
          transitionsBuilder: (_, animation, secondAnimation, child) {
            return FadeTransition(opacity: animation, child: child);
          },
        );
      default:
        return _errorRoute();
    }
  }

  static Route<dynamic> _errorRoute() {
    return MaterialPageRoute(builder: (_) {
      return Scaffold(
        appBar: AppBar(title: Text("Error")),
        body: Center(child: Text('Error page')),
      );
    });
  }
}
Screendart

import 'package:flutter/material.dart';
import 'pixabay-data.dart';
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    ImageData.init();
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Belajar Animasi Hero'),
      ),
      body: ListView.separated(
          itemCount: ImageData.pixabay.length,
          itemBuilder: (_, index) => GestureDetector(
                onTap: () {
                  Navigator.pushNamed(context, '/detail',
                      arguments: ImageData.pixabay[index]);
                },
                child: ListTile(
                  leading: Hero(
                    tag: ImageData.pixabay[index].id,
                    child: Image.network(ImageData.pixabay[index].imag
eLarge),
                    transitionOnUserGestures: true,
                  ),
                  title: Text(ImageData.pixabay[index].title),
                  subtitle: Text(ImageData.pixabay[index].author),
                ),
              ),
          separatorBuilder: (context, position) {
            return Divider();
          }),
    );
  }
}
class DetailPage extends StatelessWidget {
  final pixabay;
  DetailPage(this.pixabay);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Gambar'),
      ),
      body: Center(
        child: Hero(
          tag: pixabay.id,
          child: Image.network(pixabay.imageLarge),
        ),
      ),
    );
  }
}
Navigasi
Maindart

import 'package:flutter/material.dart';
import 'nav-drawer.dart';
void main() {
  runApp(MaterialApp(
    title: "BelajarFlutter.com",
    home: BelajarNavigationDrawer(),
  ));
}
class BelajarNavigationDrawer extends StatefulWidget {
  @override
  _BelajarNavigationDrawerState createState() =>
      _BelajarNavigationDrawerState();
}
class _BelajarNavigationDrawerState extends State<BelajarNavigationDra
wer> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<Scaffold
State>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        leading: new IconButton(
          icon: new Icon(Icons.account_circle),
          onPressed: () => _scaffoldKey.currentState.openDrawer(),
        ),
        title: Text("Belajar Drawer Nav"),
        actions: <Widget>[
          IconButton(
              icon: new Icon(Icons.account_box, color: Colors.white),
              onPressed: () => _scaffoldKey.currentState.openEndDrawer
()),
        ],
      ),
      drawer: DrawerWidget(),
      endDrawer: DrawerWidget(),
      body: Center(
        child: Text(
          'Belajar Navigation Drawer di Flutter',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}
Nav-drawer-.dart

import 'package:flutter/material.dart';

class DrawerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          _drawerHeader(),
          _drawerItem(icon: Icons.folder, text: 'My Files', onTap: () 
=> print('Tap My Files')),
          _drawerItem(icon: Icons.group, text: 'Shared with me', onTap
: () => print('Tap Shared menu')),
          _drawerItem(icon: Icons.access_time, text: 'Recent', onTap: 
() => print('Tap Recent menu')),
          _drawerItem(icon: Icons.delete, text: 'Trash', onTap: () => 
print('Tap Trash menu')),
          Divider(height: 25, thickness: 1),
          Padding(
            padding: const EdgeInsets.only(left: 20.0, top: 10, bottom
: 10),
            child: Text("Labels",
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.black54,
                )),
          ),
          _drawerItem(icon: Icons.bookmark, text: 'Family', onTap: () 
=> print('Tap Family menu')),
        ],
      ),
    );
  }
}

Widget _drawerHeader() {
  return UserAccountsDrawerHeader(
    currentAccountPicture: ClipOval(
      child: Image(image: AssetImage('assets/images/orang3.jpg'), fit: 
BoxFit.cover),
    ),
    otherAccountsPictures: [
      ClipOval(
        child: Image(image: AssetImage('assets/images/orang2.jpg'), fi
t: BoxFit.cover),
      ),
      ClipOval(
        child: Image(image: AssetImage('assets/images/orang1.jpg'), fi
t: BoxFit.cover),
      )
    ],
    accountName: Text('Belajar Flutter'),
    accountEmail: Text('hallo@belajarflutter.com'),
  );
}

Widget _drawerItem({IconData icon, String text, GestureTapCallback onT
ap}) {
  return ListTile(
    title: Row(
      children: <Widget>[
        Icon(icon),
        Padding(
          padding: EdgeInsets.only(left: 25.0),
          child: Text(
            text,
            style: TextStyle(
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ],
    ),
    onTap: onTap,
  );
}

Stack widget

import 'package:flutter/material.dart';

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

class BelajarStackWidget extends StatefulWidget {
  @override
  _BelajarStackWidgetState createState() => _BelajarStackWidgetState()
;
}

class _BelajarStackWidgetState extends State<BelajarStackWidget> {
  var date = DateTime.now();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage('https://cdn.pixabay.com/photo/201
7/02/01/22/02/mountain-landscape-2031539_960_720.jpg'),
                fit: BoxFit.fitHeight,
              ),
            ),
          ),
          Positioned(
            right: 40.0,
            top: 100.0,
            child: Text(date.hour.toString() + ':' + date.minute.toStr
ing(), style: TextStyle(color: Colors.white, fontSize: 45.0)),
          ),
          Positioned(
            right: 40.0,
            top: 150.0,
            child: Text("BelajarFlutter.com", style: TextStyle(color: 
Colors.white, fontSize: 16.0)),
          ),
          Positioned(
            bottom: 48.0,
            left: 10.0,
            right: 10.0,
            child: Card(
              elevation: 8.0,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: Column(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Text(
                      "Kata Mutiara",
                      style: TextStyle(
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 0, left: 16.0, 
right: 16.0, bottom: 8.0),
                    child: Text("Pendidikan adalah senjata paling ampu
h yang bisa kamu gunakan untuk mengubah dunia."),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 8.0, left: 16.
0, right: 16.0, bottom: 32.0),
                    child: Text("Nelson Mandela"),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
Form

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "Belajar Form Flutter",
    home: BelajarForm(),
  ));
}

class BelajarForm extends StatefulWidget {
  @override
  _BelajarFormState createState() => _BelajarFormState();
}

class _BelajarFormState extends State<BelajarForm> {
  final _formKey = GlobalKey<FormState>();
  double nilaiSlider = 1;
  bool nilaiCheckBox = false;
  bool nilaiSwitch = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("BelajarFlutter.com"),
      ),
      body: Form(
        key: _formKey,
        child: SingleChildScrollView(
          child: Container(
            padding: EdgeInsets.all(20.0),
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextFormField(
                    decoration: new InputDecoration(
                      hintText: "contoh: Susilo Bambang",
                      labelText: "Nama Lengkap",
                      icon: Icon(Icons.people),
                      border: OutlineInputBorder(borderRadius: new Bor
derRadius.circular(5.0)),
                    ),
                    validator: (value) {
                      if (value.isEmpty) {
                        return 'Nama tidak boleh kosong';
                      }
                      return null;
                    },
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextFormField(
                    obscureText: true,
                    decoration: new InputDecoration(
                      labelText: "Password",
                      icon: Icon(Icons.security),
                      border: OutlineInputBorder(borderRadius: new Bor
derRadius.circular(5.0)),
                    ),
                    validator: (value) {
                      if (value.isEmpty) {
                        return 'Password tidak boleh kosong';
                      }
                      return null;
                    },
                  ),
                ),
                CheckboxListTile(
                  title: Text('Belajar Dasar Flutter'),
                  subtitle: Text('Dart, widget, http'),
                  value: nilaiCheckBox,
                  activeColor: Colors.deepPurpleAccent,
                  onChanged: (value) {
                    setState(() {
                      nilaiCheckBox = value;
                    });
                  },
                ),
                SwitchListTile(
                  title: Text('Backend Programming'),
                  subtitle: Text('Dart, Nodejs, PHP, Java, dll'),
                  value: nilaiSwitch,
                  activeTrackColor: Colors.pink[100],
                  activeColor: Colors.red,
                  onChanged: (value) {
                    setState(() {
                      nilaiSwitch = value;
                    });
                  },
                ),
                Slider(
                  value: nilaiSlider,
                  min: 0,
                  max: 100,
                  onChanged: (value) {
                    setState(() {
                      nilaiSlider = value;
                    });
                  },
                ),
                RaisedButton(
                  child: Text(
                    "Submit",
                    style: TextStyle(color: Colors.white),
                  ),
                  color: Colors.blue,
                  onPressed: () {
                    if (_formKey.currentState.validate()) {}
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
Griedview

import 'package:flutter/material.dart';

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

class BelajarGridView extends StatelessWidget {
  final List alphabet = [
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "I",
    "J",
    "K",
    "L",
    "M",
    "N",
    "O",
    "P",
    "Q",
    "R",
    "S",
    "T",
    "U",
    "V",
    "W",
    "X",
    "Y",
    "Z"
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar: AppBar(
            title: Text("belajarFlutter.com"),
          ),
          body: GridView(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(cr
ossAxisCount: 1),
            children: <Widget>[
              GridView.count(
                crossAxisCount: 3,
                scrollDirection: Axis.horizontal,
                padding: EdgeInsets.all(20),
                children: List.generate(alphabet.length, (index) {
                  return Container(
                    height: 100,
                    child: Card(
                      child: Center(child: Text(alphabet[index], style
: TextStyle(color: Colors.white, fontSize: 20))),
                      color: Colors.deepPurpleAccent,
                    ),
                  );
                }),
              ),
              FlutterLogo(),
              FlutterLogo(),
              FlutterLogo(),
              FlutterLogo(),
            ],
          )),
    );
  }
}
Listview

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: BelajarListView(),
    );
  }
}

class BelajarListView extends StatelessWidget {
  final List bulan = [
    "Januari",
    "Fabruari",
    "Maret",
    "April",
    "Mei",
    "Juni",
    "Juli",
    "Agustus",
    "September",
    "Oktober",
    "November",
    "Desember"
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("belajarFlutter.com"),
      ),
      body: ListView.builder(
        itemBuilder: (context, index) {
          return Card(
            child: Padding(
              padding: const EdgeInsets.all(15.0),
              child: Text(bulan[index], style: TextStyle(fontSize: 30)
),
            ),
          );
        },
        itemCount: bulan.length,
      ),
    );
  }
}

Button navigation

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: BelajarNavBar(),
    );
  }
}

class BelajarNavBar extends StatefulWidget {
  @override
  _BelajarNavBarState createState() => _BelajarNavBarState();
}

class _BelajarNavBarState extends State<BelajarNavBar> {
  int _selectedNavbar = 0;

  void _changeSelectedNavBar(int index) {
    setState(() {
      _selectedNavbar = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("belajarFlutter.com"),
      ),
      body: Center(
        child: Text("Tab Index yang aktif : $_selectedNavbar", style: 
TextStyle(fontSize: 16)),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Beranda'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.assignment),
            title: Text('Pesanan'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.mail),
            title: Text('Inbox'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text('Akun'),
          ),
        ],
        currentIndex: _selectedNavbar,
        selectedItemColor: Colors.green,
        unselectedItemColor: Colors.grey,
        showUnselectedLabels: true,
        onTap: _changeSelectedNavBar,
      ),
    );
  }
}
Row

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'Flutter Hello World',
      // Application theme data, you can set the colors for the applic
ation as
      // you want
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // A widget which will be started on application startup
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({@required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Belajar Layout"),
      ),
      body: Row(
        children: [
          Container(
            color: Colors.greenAccent,
            child: FlutterLogo(
              size: 60.0,
            ),
          ),
          Container(
            color: Colors.orangeAccent,
            child: FlutterLogo(
              size: 60.0,
            ),
          ),
          Container(
            color: Colors.purpleAccent,
            child: FlutterLogo(
              size: 60.0,
            ),
          ),
        ],
      ),
    );
  }
}
Colum

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'Flutter Hello World',
      // Application theme data, you can set the colors for the applic
ation as
      // you want
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // A widget which will be started on application startup
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({@required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Belajar Layout"),
      ),
      body: Column(
        children: [
          Container(
            color: Colors.greenAccent,
            child: FlutterLogo(
              size: 60.0,
            ),
          ),
          Container(
            color: Colors.orangeAccent,
            child: FlutterLogo(
              size: 60.0,
            ),
          ),
          Container(
            color: Colors.purpleAccent,
            child: FlutterLogo(
              size: 60.0,
            ),
          ),
        ],
      ),
    );
  }
}

mainAxisAlignment colum

body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(
mainAxisAlignment row

      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(
Toolbar Dinamis dengan SliverAppBar

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ContohDynamicAppBar(),
    );
  }
}

class ContohDynamicAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Material(
        child: CustomScrollView(
          slivers: [
            SliverPersistentHeader(
              delegate: MySliverAppBar(expandedHeight: 200),
              pinned: true,
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (_, index) => ListTile(
                  title: Text("Song $index"),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

class MySliverAppBar extends SliverPersistentHeaderDelegate {
  final double expandedHeight;

  MySliverAppBar({@required this.expandedHeight});

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlap
sContent) {
    return Stack(
      fit: StackFit.expand,
      overflow: Overflow.visible,
      children: [
        Image(
          image: AssetImage('assets/images/bmth.jpg'),
          fit: BoxFit.cover,
        ),
        Center(
          child: Opacity(
            opacity: shrinkOffset / expandedHeight,
            child: Text(
              "Bring me the Horizon",
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.w700,
                fontSize: 20,
              ),
            ),
          ),
        ),
        Positioned(
          top: expandedHeight / 2 - shrinkOffset,
          left: MediaQuery.of(context).size.width / 4,
          child: Opacity(
            opacity: (1 - shrinkOffset / expandedHeight),
            child: ClipOval(
              child: Image(
                width: MediaQuery.of(context).size.width / 2,
                image: AssetImage('assets/images/bmth4.jpg'),
              ),
            ),
          ),
        ),
      ],
    );
  }

  @override
  double get maxExtent => expandedHeight;
  @override
  double get minExtent => kToolbarHeight;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => tr
ue;
}

You might also like