Structure de base

/**
 * lien explication fonts https://pusher.com/tutorials/styled-text-flutter
 * lien vers les fonts Google https://fonts.google.com/
 * trouver le lien pour la liste des fonts disponible pour Flutter
 *
 */


import 'package:flutter/material.dart';

//necesaire pour la méthode de changement de couleur de la barre de status
import 'package:flutter/services.dart';



void main() {
  //permet de changer la couleur du statusbar mais il est important de mettre aussi la couleur du background
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.black, // navigation bar color
    statusBarColor: Colors.yellow,
    statusBarBrightness: Brightness.dark
    // status bar color
  ));
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.


  @override
  Widget build(BuildContext context) {

    return MaterialApp(

      //supprimne le bandeau debug
      debugShowCheckedModeBanner: false,
      title: 'HelloWord',
      theme: ThemeData(
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        //permet de mettre une couleur à la barre de navigation
        backgroundColor: Colors.yellow,
        title: Center(
            child: new Text("Hello world",
            style: TextStyle(color: Colors.red),)
        ),
      ),
      body: Center(
        child: Text("Hello world",
        style: TextStyle(fontSize: 30.0,fontWeight:FontWeight.bold,color: Colors.blueGrey
        ),),
      ),
    );
  }
}

Snackbar

import 'package:flutter/material.dart';

void main() => runApp(new SnackBarDemo());

class SnackBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'SnackBar Demo',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('SnackBar Demo'),
        ),
        body: new SnackBarPage(),
      ),
    );
  }
}

class SnackBarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new RaisedButton(
        onPressed: () {
          final snackBar = new SnackBar(
            content: new Text('Yay! A SnackBar!'),
            action: new SnackBarAction(
              label: 'Undo',
              onPressed: () {
// Some code to undo the change!
              },
            ),
          );

// Find the Scaffold in the Widget tree and use it to show a SnackBar!
          Scaffold.of(context).showSnackBar(snackBar);
        },
        child: new Text('Show SnackBar'),
      ),
    );
  }
}

 

Resultat

Source code

AlertDialog

import 'package:flutter/material.dart';

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

class MyHome extends StatefulWidget {
  @override
  MyHomeState createState() => new MyHomeState();
}

enum MyDialogAction {
  yes,
  no,
  maybe
}

void _dialogResult(MyDialogAction value) {
  print('You selected $value');

}


class MyHomeState extends State<MyHome> {

  // Generate dialog
  AlertDialog dialog = new AlertDialog(
    content: new Text(
      "Lets go out nonite",
      style: new TextStyle(fontSize: 30.0),),
    actions: <Widget>[
      new FlatButton(onPressed: (){_dialogResult(MyDialogAction.yes);}, child: new Text('Yes')),
      new FlatButton(onPressed: (){_dialogResult(MyDialogAction.no);}, child: new Text('No')),
      new FlatButton(onPressed: (){_dialogResult(MyDialogAction.maybe);}, child: new Text('Maybe')),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Alert Dialog"),
        ),
        body: new Container(
          child: new Center(
            child: new RaisedButton(
                child: new Text("Touch the boutton"),
                // On press of the button
                onPressed: () {
                  // Show dialog
                  showDialog(context: context, child: dialog);
                }),
          ),
        ));
  }
}

 

Resultat

Source code

Side menu

Main.dart

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

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

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

class _HomeState extends State<Home> {

  String gambar1="http://idrcorner.com/images/icon/gw.jpg";
  String gambar2="https://inspired.disney.co.uk/wp-content/uploads/2017/04/disneyinspired-potc-quiz-v02-660x660-1.jpg";
  String backup;

  String nama1="Indra Armaulana";
  String nama2="Jack Sparrow";
  String backupnama;

  void gantiuser(){
    this.setState((){
      backup=gambar1;
      gambar1=gambar2;
      gambar2=backup;

      backupnama=nama1;
      nama1=nama2;
      nama2=backupnama;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("Demo Sidebar (DRAWER)"),backgroundColor: Colors.red[700],),
      drawer: new Drawer(
        child: new ListView(
          children: <Widget>[

            new UserAccountsDrawerHeader(
              accountName: new Text(nama1),
              accountEmail: new Text("idrcorner@gmail.com"),
              currentAccountPicture:
              new GestureDetector(
                onTap: (){
                  Navigator.of(context).pop();
                  Navigator.of(context).push(new MaterialPageRoute(
                      builder: (BuildContext context)=> new Detail(nama: nama1, gambar: gambar1,)
                  ));
                },
                child: new CircleAvatar(
                  backgroundImage: new NetworkImage(gambar1),
                ),
              ),
              decoration:  new BoxDecoration(
                  image: new DecorationImage(image: new NetworkImage("http://ichef.bbci.co.uk/images/ic/1600xn/p03gywjs.jpg"),
                      fit: BoxFit.cover
                  )
              ),
              otherAccountsPictures: <Widget>[

                new GestureDetector(
                    onTap: ()=> gantiuser(),
                    child:   new CircleAvatar( backgroundImage: new NetworkImage(gambar2),)

                )

              ],
            ),
            new ListTile(
              title: new Text("Setting"),
              trailing: new Icon(Icons.settings),
            ),
            new ListTile(
                title: new Text("Close"),
                trailing: new Icon(Icons.close)
            ),
          ],
        ),
      ),
      body:new Center(
        child: new Image(
          image: new NetworkImage("http://idrcorner.com/assets/nn/imgs/logo.png",),width: 450.0,
        ),
      ),
    );
  }
}

 

detail.dart

import 'package:flutter/material.dart';

class Detail extends StatelessWidget {
  Detail ({this.nama, this.gambar});
  final String nama;
  final String gambar;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: new Text("Detail $nama"),backgroundColor: Colors.red[700],),
        body: new Container(
          child: new Center(
              child :new Image(image: new NetworkImage(gambar),)
          ),
        )
    );
  }
}

 

Resultat

 

Source code

SimpleDialog

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

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

class MyApp extends StatefulWidget {
  @override
  _State createState() => new _State();
}

enum Answer{YES,NO,MAYBE}

class _State extends State<MyApp> {

  String _answer = '';

  void setAnswer(String value) {
    setState((){
      //TO DO - act on the answer
      _answer = value;
    });
  }

  Future<Null> _askuser() async {
    switch(
    await showDialog(
        context: context,
        child:  new SimpleDialog(
          title: new Text('Do you like Flutter?'),
          children: <Widget>[
            new SimpleDialogOption(
              onPressed: (){Navigator.pop(context,Answer.YES);},
              child: const Text('Yes!!!!'),

            ),
            new SimpleDialogOption(
              onPressed: (){Navigator.pop(context,Answer.NO);},
              child: const Text('NO :('),
            ),
            new SimpleDialogOption(
              onPressed: (){Navigator.pop(context,Answer.MAYBE);},
              child: const Text('...Maybe...'),
            ),
            new Icon(Icons.home)

          ],
        )
    )) {
      case Answer.YES:
        setAnswer('yes');
        break;
      case Answer.NO:
        setAnswer('no');
        break;
      case Answer.MAYBE:
        setAnswer('maybe');
        break;
    }
  }


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Name here'),
      ),
      body: new Container(
        padding: new EdgeInsets.all(32.0),
        child: new Column(
          children: <Widget>[
            new Text('You answered ${_answer}'),
            new RaisedButton(
                child: new Text('Click me'),
                onPressed: (){_askuser();}
            )
          ],
        ),
      ),
    );
  }
}

 

Resultat :

Source code

Navigation

import 'package:flutter/material.dart';

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

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("PAGE ONE"),
        ),
        body: new Container(
          child: new Column(
            children: <Widget>[
              new RaisedButton(
                child: new Text("TO PAGE TWO"),
                onPressed: () {
                  Navigator.pushNamed(context, '/PageTwo');
                },
              ),
              new Padding(padding: new EdgeInsets.only(top:20.0),
                child:
                new RaisedButton(
                  child: new Text("TO PAGE TWO VARIANT"),
                  onPressed: () {
                    Navigator.push(context, new MaterialPageRoute(builder: (_) => new PageTwo()));
                    //Navigator.of(context).pushNamedAndRemoveUntil('/Home', (Route<dynamic> route) => false);

                  },
                ),
              )

            ],


          ),
        )); // scaffold
  }
}

//page two
class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("PAGE TWO"),
        ),
        body: new Container(
          child: new Center(
              child: new Column(
                  mainAxisAlignment:MainAxisAlignment.center,
            children: <Widget>[

              new Center(

                child: new Text("You are on the page two"),
              ),
              new Padding(padding: new EdgeInsets.only(top: 10.0),
               child:  new RaisedButton(
                  child: new Text("BACK TO PAGE ONE !!"),
                  onPressed: () {
                    Navigator.pop(context);
                  },
                ),
              )

            ],
          )),
        )); // scaffold
  }
}

 

Resultat :

Source code

Listview2

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _State createState() => new _State();
}

class _State extends State<MyApp> {

  List<bool> _data = new List<bool>();

  @override
  void initState() {
    setState((){
      for(int i = 0; i < 10; i++) {
        _data.add(false);
      }
    });
  }

  void _onChange(bool value, int index) {
    setState((){
      _data[index] = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('ListView Demo'),
      ),
      body: new ListView.builder(
          itemCount: _data.length,
          itemBuilder: (BuildContext context, int index){
            return new Card(
              child: new Container(
                padding: new EdgeInsets.all(5.0),
                child: new Column(
                  children: <Widget>[
                    new Text(('This is item ${index}')),
                    new CheckboxListTile(
                      value: _data[index],
                      controlAffinity: ListTileControlAffinity.leading,
                      title: new Text('Click me item ${index}'),
                      onChanged: (bool value){_onChange(value, index);},
                    )
                  ],
                ),
              ),
            );
          }
      ),
    );
  }
}

Resultat:

Source code

BottomNavigationBar

Main.dart

import "package:flutter/material.dart";
import "PageOne.dart";
import 'PageTwo.dart';
import 'PageThree.dart';

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

class Example extends StatefulWidget {
  @override
  ExampleState createState() => new ExampleState();
}

class ExampleState extends State<Example> {

  int currentTab = 0; // Index of currently opened tab.
  PageOne pageOne = new PageOne(); // Page that corresponds with the first tab.
  PageTwo pageTwo = new PageTwo(); // Page that corresponds with the second tab.
  PageThree pageThree = new PageThree(); // Page that corresponds with the third tab.
  List<Widget> pages; // List of all pages that can be opened from our BottomNavigationBar.
// Index 0 represents the page for the 0th tab, index 1 represents the page for the 1st tab etc...
  Widget currentPage; // Page that is open at the moment.



  @override
  void initState() {
    super.initState();
    pages = [pageOne, pageTwo, pageThree]; // Populate our pages list.
    currentPage = pageOne; // Setting the first page that we'd like to show our user.
// Notice that pageOne is the 0th item in the pages list. This corresponds with our initial currentTab value.
// These two should match at the start of our application.
  }

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

  @override
  Widget build(BuildContext context) {

// Here we create our BottomNavigationBar.
    final BottomNavigationBar navBar = new BottomNavigationBar(
      currentIndex: currentTab, // Our currentIndex will be the currentTab value. So we need to update this whenever we tab on a new page!
      onTap: (int numTab) { // numTab will be the index of the tab that is pressed.
        setState(() { // Setting the state so we can show our new page.
          print("Current tab: " + numTab.toString()); // Printing for debugging reasons.
          currentTab = numTab; // Updating our currentTab with the tab that is pressed [See 43].
          currentPage = pages[numTab]; // Updating the page that we'd like to show to the user.
        });
      },
      items: <BottomNavigationBarItem>[ // Visuals, see docs for more information: https://docs.flutter.io/flutter/material/BottomNavigationBar-class.html
        new BottomNavigationBarItem( //numTab 0
            icon: new Icon(Icons.ac_unit),
            title: new Text("Ac unit")
        ),
        new BottomNavigationBarItem( //numTab 1
            icon: new Icon(Icons.access_alarm),
            title: new Text("Access alarm")
        ),
        new BottomNavigationBarItem( //numTab 2
            icon: new Icon(Icons.access_alarms),
            title: new Text("Access alarms")
        )
      ],
    );



    return new Scaffold(
      bottomNavigationBar: navBar, // Assigning our navBar to the Scaffold's bottomNavigationBar property.
      body: currentPage, // The body will be the currentPage. Which we update when a tab is pressed.
    );
  }
}

PageOne

import 'package:flutter/material.dart';

class PageOne extends StatelessWidget { // Creating a simple example page.
  @override
  Widget build(BuildContext context) {
    return new Center(child: new Text("Page one"));
  }
}

PageTwo

import 'package:flutter/material.dart';

class PageTwo extends StatelessWidget { // Creating a simple example page.
  @override
  Widget build(BuildContext context) {
    return new Center(child: new Text("Page two"));
  }
}

PageOne

import 'package:flutter/material.dart';

class PageThree extends StatelessWidget { // Creating a simple example page.
  @override
  Widget build(BuildContext context) {
    return new Center(child: new Text("Page three"));
  }
}

 

Resultat :

Source code

Tabbar Layout

Main.dart

import 'package:flutter/material.dart';
import 'package:flutter_tabbar/tab_one.dart' as tabone;
import 'package:flutter_tabbar/tab_two.dart' as tabtwo;
import 'package:flutter_tabbar/tab_three.dart' as tabthree;



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

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

class _HomeState extends State with SingleTickerProviderStateMixin {

  TabController controller;

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

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        backgroundColor: Colors.blueGrey,
        title: new Text("Tabbar Flutter"),
        bottom: new TabBar(
          controller: controller,
          tabs: [
            new Tab(icon: new Icon(Icons.shopping_basket),text: "Shopping",),
            new Tab(icon: new Icon(Icons.school),text: "School",),
            new Tab(icon: new Icon(Icons.radio),text: "Radio",),
          ],
        ),
      ),

      body: new TabBarView(
        controller: controller,
        children: [
          new tabone.tab_one(),
          new tabtwo.tab_two(),
          new tabthree.tab_three(),

        ],
      ),
    
    );
  }
}

TabOne

import 'package:flutter/material.dart';

class tab_one extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Center(
        child: new Column(
          children: [
            new Padding(padding: new EdgeInsets.all(20.0),),
            new Text("TABONE", style: new TextStyle(fontSize: 30.0),),
            new Padding(padding: new EdgeInsets.all(20.0),),
            // new Icon("Icons.star")
          ],
        ),
      ),
    );
  }
}

TabTwo

import 'package:flutter/material.dart';

class tab_two extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Center(
        child: new Column(
          children: [
            new Padding(padding: new EdgeInsets.all(20.0),),
            new Text("TABTWO", style: new TextStyle(fontSize: 30.0),),
            new Padding(padding: new EdgeInsets.all(20.0),),
            // new Icon("Icons.star")
          ],
        ),
      ),
    );
  }
}

Tab three

import 'package:flutter/material.dart';

class tab_three extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Center(
        child: new Column(
          children: [
            new Padding(padding: new EdgeInsets.all(20.0),),
            new Text("TABTHREE", style: new TextStyle(fontSize: 30.0),),
            new Padding(padding: new EdgeInsets.all(20.0),),
           // new Icon("Icons.star")
          ],
        ),
      ),
    );
  }
}

Resultat :

Source code 

Listview

Pubsepec.yaml

name: flutter_applistview
description: A new Flutter application.

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.0

dev_dependencies:
  flutter_test:
    sdk: flutter


# For information on the generic Dart part of this file, see the
# following page: https://www.dartlang.org/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
  - assets/lakers.png
  - assets/kings.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.io/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.io/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies, 
  # see https://flutter.io/custom-fonts/#from-packages

 

Main.dart

import 'package:flutter/material.dart';

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

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        backgroundColor: Colors.red[900],
        title: new Text("Listview with image"),
      ),
      body: new ListView(
        children: [

          new ListTeamAsset(image: "kings.jpeg",name: "KINGS",),
          new ListTeamAsset(image: "lakers.png",name: "LAKERS",),
          new ListTeamNetwork(image: "http://wwwcdn.howdesign.com/wp-content/uploads/LogoPrimary_300x329.jpg",name: "WARRIOS",),
          new ListTeamNetwork(image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfxFFjN5Jgj8Hr0zOnwALYgjoAEFVIQogaRio1R9izatgZQ1ml",name: "WIZARD",),

        ],
      ),
    );
  }
}

class ListTeamNetwork extends StatelessWidget {

  ListTeamNetwork ({this.image, this.name});

  final String image;
  final String name;

  @override
  Widget build(BuildContext context) {
    return new Container(
      padding: new EdgeInsets.all(20.0),
      child: new Center(
        child: new Column(
          children: 
          [
            new Image(image: new NetworkImage(image),
              width: 100.0,height: 100.0,
            ),
            new Text(name, style: new TextStyle(fontSize: 15.0),
            )
          ],
        ),
      ),
    );
  }
}

// please add the images link in pubspec.yaml
class ListTeamAsset extends StatelessWidget {

  ListTeamAsset ({this.image, this.name});

  final String image;
  final String name;

  @override
  Widget build(BuildContext context) {
    return new Container(
      padding: new EdgeInsets.all(20.0),
      child: new Center(
        child: new Column(
          children: 
          [
            new Image.asset('assets/'+image),
            new Text(name, style: new TextStyle(fontSize: 15.0),)
          ],
        ),
      ),
    );
  }
}

Resultat :

Source code