Flutter got easier to install on any Mac, just install it by home brew. It will install both flutter and dart.
brew install flutterCheck version of Flutter
flutter --versionCheck version of Dart
dart --versionCategory: Flutter
-
Read CSV file by Dart
Reading CSV files in Dart language is easy. Make sure you have already installed Dart SDK, follow this tutorial if you haven’t Install Dart SDK on Mac, Windows and Linux
For this tutorial, we are going to use the Dart plugin on PHPStorm by JetBrains. To install the plugin on Mac go to PHPStorm -> Preferences -> Plugins and search for ‘Dart’. See my screenshot.
Few more plugins for Dart
Dart for Visual Studio Code and Dart Plugin from JetBrains
After successfully installing the plugin open PHPStorm go to File -> New Project and choose Dart -> Console Application. See the screenshot.
PHPStorm will give you a project structure like this. We won’t use the dummy dart library file from lib folder. We will use only main.dart file from the bin folder.
Delete all lines from main.dart the file and paste this code. Run the code (bottom of the page) from PHPStorm it will print the id, symbol, and open column from each row of the CSV file.
Download the CSV file for testing
import 'dart:io'; import 'dart:async'; import 'dart:convert'; main(List arguments) { final File file = new File("~/Downloads/C_stock_data.csv"); Stream<List> inputStream = file.openRead(); inputStream .transform(utf8.decoder) // Decode bytes to UTF-8. .transform(new LineSplitter()) // Convert stream to individual lines. .listen((String line) { // Process results. List row = line.split(','); // split by comma String id = row[0]; String symbol = row[1]; String open = row[2]; String low = row[3]; String high = row[4]; String close = row[5]; String volume = row[6]; String exchange = row[7]; String timestamp = row[8]; String date = row[9]; print('$id, $symbol, $open'); }, onDone: () { print('File is now closed.'); }, onError: (e) { print(e.toString()); }); } -
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 createcommand. If you have not created your Flutter project read this Create your first Flutter projectOur final goal is to create a layout which looks like this. Showing person name, picture, and bio. Download the sketch file.
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.
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.pngnew 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))), ) ), ], ) ); } }