赞
踩
今天听网易云音乐的时候无意中看到一组图分享给大家
目录
Flutter是Google一个新的用于构建跨平台的手机App的SDK。写一份代码,在Android 和iOS平台上都可以运行,最近看到很多大公司都在用Flutter,比如阿里巴巴的咸鱼、淘宝、京东,说明什么?说明大家都重视Flutter跨平台,学习此篇文章你可以学到Flutter的搭建、一些基本控件的使用、以及动态添加数据等,由于有一些人是初学者我尽量每个都讲详细一点。
记得当初刚入行程序员的时候,第一句代码就是Hello world,那么我们第一句代码就以Hello world开始
搭建环境
这个已经千篇一律的,我就不讲解了请移步官方搭建教程
了解工具
我用的是IDE工具,今天就以intellij工具为例,详细使用请移步我之前写的文章AndroidStudio使用第一步创建程序:
Flutter sdk介绍二种方式:
第一种方式:
关于Flutter的安装,参考官方文档中的步骤即可。本文以macOS为例,介绍Flutter在macOS上的安装细节。
官方文档地址:https://flutter.io/get-started/install/
首先,下载Flutter的源码,按照官方建议,我们选择beta分支,如下所示:
git clone -b beta https://github.com/flutter/flutter.git
代码下载后,目录结构如下:
- flutter renyugang$ tree -L 2 -d
- .
- ├── bin
- │ ├── cache
- │ └── internal
- ├── dev
- │ ├── automated_tests
- │ ├── benchmarks
- │ ├── bots
- │ ├── devicelab
- │ ├── docs
- │ ├── integration_tests
- │ ├── manual_tests
- │ ├── missing_dependency_tests
- │ └── tools
- ├── examples
- │ ├── catalog
- │ ├── flutter_gallery
- │ ├── flutter_view
- │ ├── hello_world
- │ ├── layers
- │ ├── platform_channel
- │ ├── platform_channel_swift
- │ ├── platform_view
- │ └── stocks
- └── packages
- ├── flutter
- ├── flutter_driver
- ├── flutter_localizations
- ├── flutter_test
- └── flutter_tools
- directories
接着,为了方便后续使用,需要将项目根目录下bin路径加入环境变量PATH中,打开~/.bash_profile文件,修改环境变量即可,如下:
- # 注意:Users/didi/google/flutter需要替换为你本地Flutter项目的路径
- export PATH=$PATH:/Users/didi/google/flutter/bin
然后,我们就可以通过flutter doctor
命令来执行Flutter的安装程序了,经过一段时间的下载和安装,Flutter会输出安装结果:
- flutter renyugang$ flutter doctor
- Doctor summary (to see all details, run flutter doctor -v):
- [✓] Flutter (Channel beta, v0.1.5, on Mac OS X 10.11.1 15B42, locale zh-Hans)
- [✓] Android toolchain - develop for Android devices (Android SDK 26.0.2)
- [!] iOS toolchain - develop for iOS devices (Xcode 7.3.1)
- ✗ Flutter requires a minimum Xcode version of 9.0.0.
- Download the latest version or update via the Mac App Store.
- ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
- brew install --HEAD libimobiledevice
- brew install ideviceinstaller
- ✗ ios-deploy not installed. To install:
- brew install ios-deploy
- ✗ CocoaPods not installed.
- CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
- Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
- For more info, see https://flutter.io/platform-plugins
- To install:
- brew install cocoapods
- pod setup
- [✓] Android Studio (version 3.0)
- [✓] IntelliJ IDEA Community Edition (version 2017.3.1)
- [✓] Connected devices (1 available)
- ! Doctor found issues in 1 category.
- ---------------------
第二种方式:
https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#windows
直接进网站下载最新sdk即可,非常简单,不会命令的推荐使用这种。
编写Hello world
准备好以后我们进行第一句代码Hello world编写并且运行
- import 'package:flutter/material.dart';
- import 'package:flutter1/TextGv.dart';
- import 'package:flutter1/TextLayout.dart';
-
- void main() => runApp(new MyApp());
-
- class MyApp extends StatelessWidget {
- final List<String> items;
-
- MyApp({Key key, @required this.items}) : super(key: key);
-
- @override
- Widget build(BuildContext context) {
- // TODO: implement build
- return MaterialApp(
- title: 'Welcome to Flutter',
- home: Scaffold(
- body: Center(child: Text('Hello world 帅气的阿力')),
- )
-
- );
- }
- }
了解各个基层控件
ListView
常见的listview的一些效果以及实现方法
效果一
- class TitleImgList extends StatelessWidget {
- @override
-
- import 'package:flutter/material.dart';
- import 'package:flutter1/TextGv.dart';
- import 'package:flutter1/TextLayout.dart';
-
- void main() => runApp(new MyApp(
- ));
-
- class MyApp extends StatelessWidget {
-
- @override
- Widget build(BuildContext context) {
- // TODO: implement build
- return MaterialApp(
- title: 'Hello 阿力',
- home:Scaffold(
- body:Center(
- child:TitleImgList()
- )
- ),
- );
- }
- }
-
- Widget build(BuildContext context) {
- // TODO: implement build
- return ListView(
- scrollDirection: Axis.vertical,
- children: <Widget>[
- new ListTile(
- leading: new Icon(Icons.perm_camera_mic),
- title: new Text('perm_camera_mic'),
- ),
- new ListTile(
- leading: new Icon(Icons.pets),
- title: new Text('perm_camera_mic'),
- ),
- new ListTile(
- leading: new Icon(Icons.lock_open),
- title: new Text('perm_camera_mic'),
- ),
- new ListTile(
- leading: new Icon(Icons.perm_identity),
- title: new Text('perm_camera_mic'),
- ),
- new ListTile(
- leading: new Icon(Icons.perm_data_setting),
- title: new Text('perm_camera_mic'),
- ),
- new ListTile(
- leading: new Icon(Icons.beach_access),
- title: new Text('perm_camera_mic'),
- )
- ],
- );
- }
- }
效果二
-
- import 'package:flutter/material.dart';
- import 'package:flutter1/TextGv.dart';
- import 'package:flutter1/TextLayout.dart';
-
- void main() => runApp(new MyApp(
- ));
-
- class MyApp extends StatelessWidget {
-
- @override
- Widget build(BuildContext context) {
- // TODO: implement build
- return MaterialApp(
- title: 'Hello 阿力',
- home:Scaffold(
- body:Center(
- child:ImgList()
- )
- ),
- );
- }
- }
-
- class ImgList extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- // TODO: implement build
- return ListView(
- scrollDirection: Axis.vertical,
- children: <Widget>[
- new Image.network(
- 'https://img4.mukewang.com/5c18cf540001ac8206000338-240-135.jpg'),
- new Image.network(
- 'https://img4.mukewang.com/5c18cf540001ac8206000338-240-135.jpg'),
- new Image.network(
- 'https://img4.mukewang.com/5c18cf540001ac8206000338-240-135.jpg'),
- new Image.network(
- 'https://img4.mukewang.com/5c18cf540001ac8206000338-240-135.jpg'),
- new Image.network(
- 'https://img4.mukewang.com/5c18cf540001ac8206000338-240-135.jpg'),
- new Image.network(
- 'https://img4.mukewang.com/5c18cf540001ac8206000338-240-135.jpg'),
- new Image.network(
- 'https://img4.mukewang.com/5c18cf540001ac8206000338-240-135.jpg'),
- new Image.network(
- 'https://img4.mukewang.com/5c18cf540001ac8206000338-240-135.jpg'),
- new Image.network(
- 'https://img4.mukewang.com/5c18cf540001ac8206000338-240-135.jpg')
- ],
- );
- }
- }
效果三
- import 'package:flutter/material.dart';
- import 'package:flutter1/TextGv.dart';
- import 'package:flutter1/TextLayout.dart';
-
- void main() => runApp(new MyApp(
- ));
-
- class MyApp extends StatelessWidget {
-
- @override
- Widget build(BuildContext context) {
- // TODO: implement build
- return MaterialApp(
- title: 'Hello 阿力',
- home:Scaffold(
- body:Center(
- child:crossImgList()
- )
- ),
- );
- }
- }
-
-
- class crossImgList extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- // TODO: implement build
- return ListView(
- scrollDirection: Axis.horizontal,
- children: <Widget>[
- new Container(
- width: 180.0,
- color: Colors.indigo,
- ),
- new Container(
- width: 180.0,
- color: Colors.amber,
- ),
- new Container(
- width: 180.0,
- color: Colors.pinkAccent,
- ),
- new Container(
- width: 180.0,
- color: Colors.lightGreenAccent,
- ),
- new Container(
- width: 180.0,
- color: Colors.cyan,
- ),
- new Container(
- width: 180.0,
- color: Colors.red,
- )
- ],
- );
- }
- }
GridView
常见的GridView的一些效果以及实现方法
效果一
- import 'package:flutter/material.dart';
- import 'package:flutter1/TextGv.dart';
- import 'package:flutter1/TextLayout.dart';
-
- void main() => runApp(new MyApp(
- ));
-
- class MyApp extends StatelessWidget {
-
- @override
- Widget build(BuildContext context) {
- // TODO: implement build
- return MaterialApp(
- title: 'Hello 阿力',
- home:Scaffold(
- body:Center(
- child:GvText()
- )
- ),
- );
- }
- }
-
- class GvText extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- // TODO: implement build
- return GridView(
- gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
- crossAxisCount: 3,
- mainAxisSpacing: 5.0,
- crossAxisSpacing: 5.0,
- childAspectRatio: 0.7),
- children: <Widget>[
- new Text('阿力1号'),
- new Text('阿力2号'),
- new Text('阿力3号'),
- new Text('阿力4号'),
- new Text('阿力5号'),
- new Text('阿力6号')
- ],
- );
- }
- }
效果二
- import 'package:flutter/material.dart';
- import 'package:flutter1/TextGv.dart';
- import 'package:flutter1/TextLayout.dart';
-
- void main() => runApp(new MyApp(
- ));
-
- class MyApp extends StatelessWidget {
-
- @override
- Widget build(BuildContext context) {
- // TODO: implement build
- return MaterialApp(
- title: 'Hello 阿力',
- home:Scaffold(
- body:Center(
- child:GvImg()
- )
- ),
- );
- }
- }
-
-
- //演示Gv图片
- class GvImg extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- // TODO: implement build
- return GridView(
- gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
- crossAxisCount: 3,
- mainAxisSpacing: 2.0,
- crossAxisSpacing: 2.0,
- childAspectRatio: 0.7),
- children: <Widget>[
- new Image.network(
- 'http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',
- fit: BoxFit.cover),
- new Image.network(
- 'http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',
- fit: BoxFit.cover),
- new Image.network(
- 'http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',
- fit: BoxFit.cover),
- new Image.network(
- 'http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',
- fit: BoxFit.cover),
- new Image.network(
- 'http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',
- fit: BoxFit.cover),
- new Image.network(
- 'http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',
- fit: BoxFit.cover),
- new Image.network(
- 'http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',
- fit: BoxFit.cover),
- new Image.network(
- 'http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',
- fit: BoxFit.cover),
- new Image.network(
- 'http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',
- fit: BoxFit.cover),
- ],
- );
- }
以上就是实现Flutter比较基础的二个控件,下一章在给大家介绍以下几个控件,并且开源几个我自己服务器的api提供给大家练习,建议大家按照上面写一遍实现一下效果,源码下一期给出来并且带大家了解Dart语言
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。