Month: April 2018

  • Create your first Flutter Layout

    In this article, we are going to create a Flutter Layout from existing source code which gets generated by fluter create command. If you have not created your Flutter project read this Create your first Flutter project

    Our final goal is to create a layout which looks like this. Showing person name, picture, and bio. Download the sketch file.

    Flutter Layout

    We are going to cut MyHomePage and _MyHomePageState classes from ‘main.dart’ file and paste the clipboard content into a new file ‘bio_detail_widget.dart‘ in widgets folder under lib folder.

    See my screenshot.

    Flutter Layout

    Name your libraries and source files must follow dart coding guidelines using lowercase_with_underscores. You can read coding guidelines here Effective Dart: Style

    Don’t forget to import ‘bio_detail_widget.dart’ file in ‘main.dart’ file.
    import 'package:ff_tutorial_2/widgets/bio_detail_widget.dart';
     
    Finally, _MyHomePageState class looks like the code on the bottom of the page.
     
    Our body has a child which is new Column, it is a Multi-child layout widget. Column widget places its children vertically.
     
    We have two Expanded widgets one holding our bio picture, name and age other is holding our bio description. Expanded makes its child expand to fill available space in the main axis.
     
    Our first Expanded widget has one child which is a Row, it displays its children in a horizontal array.
     
    For Image, we have created a new folder called images in the same level as pubspec.yaml file. Our pubspec.yaml file has image reference then all the project files automatically can use this reference.
     
    
    
      assets:
          - images/bio_pic_1.png
    
    
    
    
      new Expanded(
          child: new Image.asset('images/bio_pic_1.png'),
      ),
     
    
    class _MyHomePageState extends State {
    
      @override
      Widget build(BuildContext context) {
        // This method is rerun every time setState is called, for instance as done
        // by the _incrementCounter method above.
        //
        // The Flutter framework has been optimized to make rerunning build methods
        // fast, so that you can just rebuild anything that needs updating rather
        // than having to individually change instances of widgets.
        return new Scaffold(
          appBar: new AppBar(
            // Here we take the value from the MyHomePage object that was created by
            // the App.build method, and use it to set our appbar title.
            title: new Text(widget.title),
          ),
          body: new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
    
                children: [
    
                  new Expanded(
                    flex:0,
                    child: new Container(
                      padding: new EdgeInsets.all(10.0),
                      child: new Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                                new Expanded(
                                  child: new Image.asset('images/bio_pic_1.png'),
                                ),
    
                               new Expanded(
                                  child: new Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    mainAxisSize: MainAxisSize.min,
                                    children: [
    
                                          new Text('Name: John Doe', style: new TextStyle(color: Color.fromRGBO(138, 87, 42, 100.00))),
                                          new Text('Age: 34', style: new TextStyle(color: Color.fromRGBO(138, 87, 42, 100.00))),
    
    
                                    ],
                                  )
                                ),
    
                        ],
                      ),
                    )
    
                  ),
    
                   new Expanded(
                      child: new Container(
                        padding: new EdgeInsets.all(10.0),
                        child: new Text('Bio: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ille, ut dixi, vitiose. Eadem nunc mea adversum te oratio est. Nihil minus, contraque illa hereditate dives ob eamque rem laetus. Duo Reges: constructio interrete.',
                        style: new TextStyle(color: Color.fromRGBO(138, 87, 42, 100.00))),
                      )
                   ),
    
                ],
              )
        );
      }
    }
    
    Spread the love
  • Create your first Flutter project

    To create your first Flutter project on Mac you just need your terminal and editor, we are going to use Visual Studio Code with Dart Code Plugin.

    If you haven’t installed Flutter Framework, please follow this tutorial
    How to install Flutter on Mac.

    1) Open the terminal on your Mac and cd to the directory you want to create your Flutter project.

    Type this flutter create ff_tutorial_2

    ff_tutorial_2 is my project name, you can use whatever you want. Your terminal should print something like this.

    Create your first Flutter project

    2) Open the project with Visual Studio Code, if you have Dart Code plugin you should see running simulator or device name on the right-bottom of the editor.

    Create your first Flutter project

     

    3) Now open terminal again or use Visual Studio Code terminal and type this

    flutter run

    Your first Flutter project will run on the simulator.

    Create your first Flutter project

    Spread the love
  • How to install Flutter on Mac

    Install Flutter by homebrew on Mac

    If you are looking for instruction for Windows or Linux, please click here. To install flutter on Mac, please follow these instructions.

    1)  Download Flutter Framework .zip from Flutter GitHub, make sure you are downloading beta branch. Take a look at this screenshot.

    install flutter

    2) Create a directory called flutter in your home directory or wherever you want, I usually put this in my packages directory. So it looks like this ~/packages/flutter.

    3) Update your .bash_profile. Open with your text editor or nano ~/.bash_profile on the terminal.  Add this line

    export PATH=/Users/YourUserName/packages/flutter/bin:$PATH

    Replace YourUserName with your Mac user.

    install flutter

    Now open the terminal and type flutter, you should see the list of available commands. It means flutter is installed successfully on your Mac.

    install flutter

    But we are not finished yet, Mac needs few more stuff.

    4) Now type flutter doctor on the terminal just like brew doctor. It will check for errors. Install all the required dependencies from Homebrew.

    Now you are ready to go.


    Spread the love