Contoh Card Pada Flutter


Card Pada Flutter


Berikut adalah contoh penggunaan widget card pada flutter

import 'package:flutter/material.dart';

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

class CardSaya extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: new Text('Card APP'),
          backgroundColor: Colors.green,
        ),
        body: new Container(
            margin: EdgeInsets.all(20.0),
            child: new Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Card(
                      color: Colors.green,
                      child: new Column(children: <Widget>[
                        new Icon(
                          Icons.favorite,
                          size: 20.0,
                          color: Colors.pink,
                        ),
                        new Text('Favorites',
                            style: new TextStyle(fontSize: 20.0)),
                      ])),
                  Card(
                      color: Colors.blue,
                      child: new Column(children: <Widget>[
                        new Icon(
                          Icons.home,
                          size: 20.0,
                          color: Colors.pink,
                        ),
                        new Text('Home', style: new TextStyle(fontSize: 20.0)),
                      ])),
                  Card(
                      color: Colors.grey,
                      child: new Column(
                        children: <Widget>[
                          new Icon(
                            Icons.message,
                            size: 20.0,
                            color: Colors.pink,
                          ),
                          new Text('Message',
                              style: new TextStyle(fontSize: 20.0)),
                        ],
                      ))
                ])));
  }
}


Hasil dari sourcer code diatas dapat dilihat pada video dibawah

di Tidak ada komentar:
Label:

Bottom Navigation Bar - Flutter


Bottom NavigationBar-Flutter

Berikut adalah contoh pembuatan Bottom navigation Bar pada flutter, dengan menggunakan widget yang bernama bottomNavigationBar. Pada projek ini kita membuat 3 file dart yaitu main.dart,layout1.dart,layout2.dart.

Main.dart
import 'package:btnnav/Layout1.dart';
import 'package:btnnav/Layout2.dart';
import 'package:flutter/material.dart';
void main() => runApp(new ButtonNavDemo());

class ButtonNavDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Bottom Navigation Demo',
      home: new HomeScreen(title: 'Bottom Navigation Demo'),
    );
  }
}

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

class _HomeScreenState extends State<HomeScreen> {
PageController _pageController;
int _page =0;

@override
void initState(){
super.initState();
_pageController = new PageController();
}

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

void navigaationTapped(int page){
  _pageController.animateToPage(page,duration:const Duration(microseconds: 300),curve:Curves.ease);
}

void onPageChanged(int page){
  setState((){
    this._page=page;
  });
}
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar : new AppBar(
        backgroundColor: Colors.green,
        title: new Text(widget.title,style:new TextStyle(color:Colors.white))
      ),
      body: new PageView(
        children:[
          Layout1(),
          Layout2(),
        ],
        onPageChanged:onPageChanged,controller: _pageController,
      ),
      bottomNavigationBar: new Theme(data:Theme.of(context).copyWith(canvasColor:Colors.green),
      child: new BottomNavigationBar(
        items: [
          new BottomNavigationBarItem(
            icon:new Icon(Icons.home,
            color:Colors.white
          ),
          title:new Text(
            "Home",style: new TextStyle(color:Colors.white),
          ),
          ),
          new BottomNavigationBarItem(
            icon:new Icon(Icons.message,
            color:Colors.white
          ),
          title:new Text(
            "Message",style: new TextStyle(color:Colors.white),
          )
          )
        ],
        onTap: navigaationTapped,
        currentIndex:_page,

      )
      )
    );
  }
}

Layout1.dart

import 'package:flutter/material.dart';

class Layout1 extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Center(
      child: new Text("Home")
    );
  }
}


Layout2.dart

import 'package:flutter/material.dart';

class Layout2 extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Center(
      child: new Text("Message")
    );
  }
}

Demo dari source code diatas dapat dilihat pada video dibawah



di 1 komentar:
Label:

Membuat Tabbar Pada Flutter


Tabbar pada Flutter

Sering kali kita jumpai pada sebuah aplikasi mobile dengan design tab, Tabbar pada flutter dapat kita buat menggunakan widget yang bernama TabBar. Pada tutotial ini kita akan membuat tiga buah file dart. Yaitu  yang pertama main.dart yang degenerate otomatis saat pembuatan projek, kemudian file yang lain yaitu FirstScreen.dart dan SecondScreen.dart.

Main.dart
import 'package:flutter/material.dart';
import 'FirstScreen.dart';
import 'SecondScreen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.directions_car)),
              Tab(
                  icon: Icon(
                Icons.directions_transit,
              ))
            ],
          ),
          title: Text("Contoh Tab Tab"),
        ),
        body: TabBarView(children: [
          FirstScreen(),
          SecondScreen(),
        ]),
      ),
    ));
  }
}

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

class FirstScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child:Center(
        child:Text('TAB 1')
      )
    );
  }
 
}

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

class SecondScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child:Center(
        child:Text('TAB 2')
      )
    );
  }
 
}

Hasil dari script diatas dapat dilihat pada video demo dibawah :


di Tidak ada komentar:
Label:

Membuat Navigation Drawer di Flutter

Berikut adalah source code untu membuat menu navigation drawer ada flutter


import 'package:flutter/material.dart';

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

class DrawerLayout extends StatelessWidget {
final appTitle = 'Navigation Drawer';

@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: appTitle,
home: HomeAPP(title: appTitle),
);
}
}

class HomeAPP extends StatelessWidget {
final String title;
HomeAPP({Key key, this.title}) : super(key: key);

@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(child: Text('My Home Page')),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text("Drawer header"),
decoration: BoxDecoration(color: Colors.green)),
ListTile(title: Text('Menu 1'), onTap: () {}),
ListTile(title: Text('Menu 2'), onTap: () {}),
ListTile(title: Text('Menu 3'), onTap: () {}),
],
),
),
);
}
}

 Dari script code diatas terlihat beberapa kode penting yang digunakan untuk membuat navigasi yaitu :

drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text("Drawer header"),
decoration: BoxDecoration(color: Colors.green)),
ListTile(title: Text('Menu 1'), onTap: () {}),
ListTile(title: Text('Menu 2'), onTap: () {}),
ListTile(title: Text('Menu 3'), onTap: () {}),
],
),
),


Hasil dari source code diatas dapat dilihat pada demo video dibawah 

di Tidak ada komentar:
Label:
Langganan: Postingan (Atom)

Profile Page Screen - Flutter UI

Profile Page Berikut ini adalah contoh  source code untuk Design Profile Page menggunakan flutter,  sebelumnya jangan lupa untuk membua...