Flutter入门和实战一

2019年7月13日 203次阅读来源: 工程师丶佛爷

《Flutter入门和实战一》

娱乐

今天听网易云音乐的时候无意中看到一组图分享给大家

《Flutter入门和实战一》

介绍

Flutter是Google一个新的用于构建跨平台的手机App的SDK。写一份代码，在Android 和iOS平台上都可以运行，最近看到很多大公司都在用Flutter，比如阿里巴巴的咸鱼、淘宝、京东，说明什么？说明大家都重视Flutter跨平台，学习此篇文章你可以学到Flutter的搭建、一些基本控件的使用、以及动态添加数据等，由于有一些人是初学者我尽量每个都讲详细一点。

编码

记得当初刚入行程序员的时候，第一句代码就是Hello world，那么我们第一句代码就以Hello world开始

搭建环境
了解工具
编写Hello world
了解各个基层控件

搭建环境

这个已经千篇一律的,我就不讲解了请移步官方搭建教程

分别有WINDOWS MACOS LINUX

了解工具

《Flutter入门和实战一》

我用的是IDE工具，今天就以intellij工具为例，详细使用请移步我之前写的文章AndroidStudio使用第一步创建程序：

Flutter sdk下载

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即可，非常简单，不会命令的推荐使用这种。

创建第一个Flutter项目

《Flutter入门和实战一》

编写代码

编写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  帅气的阿力')),
        )

        );
  }
}

《Flutter入门和实战一》

了解各个基层控件

ListView
GridView
RowWidget
StackWiget
ColummnWidget

ListView

常见的listview的一些效果以及实现方法

《Flutter入门和实战一》

效果一

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的一些效果以及实现方法

《Flutter入门和实战一》

效果一

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语言

RowWidget
StackWiget
ColummnWidget

    原文作者：工程师丶佛爷
    原文地址: https://blog.csdn.net/a214024475/article/details/87865414
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。