flutter 本身整理

時間 2019-11-29

標籤 flutter 本身整理简体版

原文原文鏈接

2018-05html

資料常見問題解決處android

https://flutter.io/flutter-for-android/ios

起步 api widgetgit

https://flutter.io/docs/github

其餘(資源來自 Udacity https://cn.udacity.com/course/build-native-mobile-apps-with-flutter--ud905)json

Documentation: https://docs.flutter.io/
Github: https://github.com/flutter/flutter
StackOverflow: https://stackoverflow.com/questions/tagged/flutter
Gitter: https://gitter.im/flutter/flutter
Effective Dart Guide: https://www.dartlang.org/guides/language/effective-dart
Dart Tips: https://www.dartlang.org/resources/dart-tips
Flutter FAQ: https://flutter.io/faq/
Flutter Rendering: https://www.youtube.com/watch?v=UUfXWzp0-DU
Flutter Engine: https://github.com/flutter/engine/wiki
Hot Reload: https://flutter.io/hot-reload/
Flutter Inspector: https://dart-lang.github.io/observatory/
Dart Style Guide: https://www.dartlang.org/guides/language/effective-dart/style
Dart Observatory: https://dart-lang.github.io/observatory/
Flutter Widgets: https://flutter.io/widgets/
Flutter Gallery App Code: https://github.com/flutter/flutter/tree/master/examples/flutter_gallery
Flutter Gallery Android App: https://play.google.com/store/apps/details?id=io.flutter.gallery
Flutter Layout: https://flutter.io/tutorials/layout/
Material: https://material.io
Icons: https://thenounproject.com
Images: https://unsplash.com
Fonts: https://fonts.google.com
Google APIs: https://pub.dartlang.org/packages/googleapis
Async and Futures: https://www.dartlang.org/tutorials/language/futures
Testing: https://flutter.io/testing/

資料api

https://flutter.io/platform-channels/app

　　flutter 與原生交互less

https://docs.flutter.io/flutter/widgets/Center-class.htmlsocket

　　A widget that centers its child within itself.

https://docs.flutter.io/flutter/widgets/Flex-class.html

https://docs.flutter.io/flutter/widgets/Row-class.html

https://docs.flutter.io/flutter/widgets/Column-class.html

　　兩個經常使用的 Row 和 Column 類都是 Flex 的子類而 Flex 類是不會產生滾動條的要滾動條可考慮 ListView

　Column 裏面放 ListView 須要用 Expanded 包一下　　

body: new Column(
  children: <Widget>[
    new Expanded(
        child: new ListView(
      scrollDirection: Axis.horizontal,
      children: _getGamesListData(),
    )),
    new Expanded(
        child: new ListView(
      scrollDirection: Axis.horizontal,
      children: _getGamesListData(),
    )),
  ],
),

https://docs.flutter.io/flutter/widgets/Flexible-class.html

　　A widget that controls how a child of a Row, Column, or Flex flexes.

　　Using a Flexible widget gives a child of a Row, Column, or Flex the flexibility to expand to fill the available

　　space in the main axis (e.g., horizontally for a Row or vertically for a Column), but, unlike Expanded, Flexible

　　does not require the child to fill the available space.

　　A Flexible widget must be a descendant of a Row, Column, or Flex, and the path from the Flexible widget to

　　its enclosing Row, Column, or Flex must contain only StatelessWidgets or StatefulWidgets (not other kinds of widgets, like RenderObjectWidgets).

https://docs.flutter.io/flutter/widgets/Expanded-class.html

　　Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space in the

　　main axis (e.g., horizontally for a Row or vertically for a Column).

https://docs.flutter.io/flutter/widgets/Container-class.html

　　A convenience widget that combines common painting, positioning, and sizing widgets.

https://docs.flutter.io/flutter/widgets/GestureDetector-class.html

　　A widget that detects gestures.

　　Attempts to recognize gestures that correspond to its non-null callbacks.

　　If this widget has a child, it defers to that child for its sizing behavior. If it does not have a child, it grows to fit

　　the parent instead.

https://docs.flutter.io/flutter/widgets/State-class.html

　　initState() → void
　　Called when this object is inserted into the tree.
　　setState(VoidCallback fn) → void
　　Notify the framework that the internal state of this object has changed.(有狀態的東西得放在State裏)
　　dispose() → void
　　Called when this object is removed from the tree permanently.

　　assets 裏面的資源只讀

讀取assets裏面的文檔假如是json文件

https://docs.flutter.io/flutter/painting/ColorSwatch-class.html（暫時不知道怎麼用）

StatefullWidget 的變量放法

https://docs.flutter.io/flutter/widgets/Directionality-class.html

　　A widget that determines the ambient directionality of text and text-direction-sensitive render objects.

https://docs.flutter.io/flutter/material/OutlineInputBorder-class.html

return new Scaffold(
  appBar: new AppBar(
    title: new Text('遊戲房間'),
    centerTitle: true,
  ),
  body: new Center(
    child: new TextField(
      keyboardType: TextInputType.number,
      decoration: new InputDecoration(
          labelText: 'Input',
          border: new OutlineInputBorder(
              borderRadius: new BorderRadius.circular(0.0))),
    ),
  ),
);

https://docs.flutter.io/flutter/widgets/Navigator-class.html
　　A widget that manages a set of child widgets with a stack discipline.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.brown,
      ),
      home: new MyHomePage(title: 'xwh渣渣遊戲平臺'),
      routes: <String, WidgetBuilder>{
        '/gaming': (BuildContext context) => new Gaming(),
      },
    );
  }
}
彈出：
Navigator.pop(context);
壓入：
Navigator.of(context).pushNamed('/gaming');
其餘方法:



https://docs.flutter.io/flutter/dart-io/Socket-class.html

　　connect(dynamic host, int port, { dynamic sourceAddress, Duration timeout }) → Future<Socket>
　　Creates a new socket connection to the host and port and returns a Future that will complete with either a

　　　　Socket once connected or an error if the host-lookup or connection failed

　　listen(void onData(T event), { Function onError, void onDone(), bool cancelOnError }) →

　　　　StreamSubscription<List<int>>
　　Adds a subscription to this stream.

　　transform<S>(StreamTransformer<List<int>, S> streamTransformer) → Stream<S>
　　Applies a StreamTransformer to the current stream.

　例子：　

　　創建

......

StreamSubscription<String> streamSubscription;
final oneSocket = Socket.connect("111.231.54.107", 80).then<Socket>((socket) {
  streamSubscription = socket.transform(utf8.decoder).listen((data) {
    print("接收到來自Server的數據：" + data);
  });
  return socket;
}).whenComplete(() {
  print("全局惟一socket 初始化完成");
}); //全局惟一socket

void main() => runApp(new MyApp());
......

　發送數據

void _incrementCounter() {
  oneSocket.then<Socket>((socket) {
    socket.write('Server 你好！');
  }).then((socket) {
    if (streamSubscription.isPaused) {
      streamSubscription.resume();
    }
  }).catchError((e) {
    print('Something really unknown: $e');
  });
}
https://docs.flutter.io/flutter/dart-async/StreamSubscription-class.html

　　A subscription on events from a Stream.

　　When you listen on a Stream using Stream.listen, a StreamSubscription object is returned.

　　onData method ：

　　　　Replaces the data event handler of this subscription.

  ///gameName 遊戲名
  ///changeViewFunction 改變當前Corridor顯示的函數
  static  setGameCorridorView(gameName,changeViewFunction) {
    if (SocketTools.oneSocket == null) {
      new Future(() {
        SocketTools.connect();
      }).then((_) {
        var timer;
        timer = Timer.periodic(const Duration(milliseconds: 50), (Void) {
          if (SocketTools.oneSocket != null) {
            (timer as Timer).cancel();
            print("socket 鏈接創建成功");
            print("設置無延遲成功？" +
                SocketTools.oneSocket
                    .setOption(SocketOption.tcpNoDelay, true)
                    .toString());
            SocketTools.oneSocket.write(
                '0066{"role":"corridor","action":"connect","msg":{"game":"'+gameName+'"}}');
            handler = SocketTools.oneSocket.transform(utf8.decoder).listen((data) {
              print("接收到來自Server的數據：" + data);
              changeViewFunction(data);
            });
          }
        });
      });
    }

    for (dynamic element in (Game.gameConfigValue as List<dynamic>)) {
      if (element["lev"] == Game.roomLev) {
        Game.levMoney = element["lev_money"];
        Game.rooms = element["rooms"];
        Game.levMoney = element["lev_money"];
      }
    }
  }

https://flutter.io/assets-and-images/#updating-the-launch-screen

　添加app啓動過渡畫面

安卓的測試:　　　　ios照作就好了

https://docs.flutter.io/flutter/material/PopupMenuButton-class.html
　　Displays a menu when pressed and calls onSelected when the menu is dismissed because an 
　　　　item was selected. The value passed to onSelected is the value of the selected menu item.

https://docs.flutter.io/flutter/widgets/State-class.html
　　State的生命週期
https://docs.flutter.io/flutter/material/FlatButton-class.html
　　Use flat buttons on toolbars, in dialogs, or inline

showDialog(
    context: context,
 builder: (ctx) => new AlertDialog(
 content: new Text('註冊${pirateNames['mes']}'),
 actions: <Widget>[
 new ButtonBar(children: <Widget>[
 new FlatButton(
 onPressed: () {Navigator.pop(context);Navigator.pop(context);},
 child: new Text("返回登陸"))
 ])
 ],
 ));

https://www.dartlang.org/dart-vm/io-library-tour#http-client

import 'dart:io';
import 'dart:async';
import 'dart:convert';

Future<String> login(ename,pas) async {
 var url = Uri.parse("http://192.168.0.53:3000/login?user%5bename%5d=$ename&user%5bpas%5d=$pas");
 var httpClient = HttpClient();
 var request = await httpClient.postUrl(url);
 var response = await request.close();
 var data = await response.transform(utf8.decoder).single;
 print('Response ${response.statusCode}: $data');
 httpClient.close();
 return data;
}
其中 %5b是[ 的UrlEncode編碼 %5d是 ]的UrlEncode編碼 上面顯示的是post請求

 https://docs.flutter.io/flutter/widgets/GlobalKey-class.html

　　　　A key that is unique across the entire app.

　　　　Global keys uniquely identify elements. Global keys provide access to other objects that are associated with

　　　　　　elements, such as the a BuildContext and, for StatefulWidgets, a State.

final _formKey = new GlobalKey<FormState>();
String _account;
String _pas;
void _onSubmit() async {
 final form = _formKey.currentState;
 if (form.validate()) {
 form.save();
  ......

https://docs.flutter.io/flutter/rendering/BoxConstraints-class.html
　　Immutable layout constraints for RenderBox layout.
https://docs.flutter.io/flutter/package-platform_platform/Platform-class.html

https://docs.flutter.io/flutter/dart-ui/Window-class.html
　　The most basic interface to the host operating system's user interface.
　　There is a single Window instance in the system, which you can obtain from the window property.
　　調用方式：
　　　　import 'dart:ui';
　　　　...
　　　　class _RoomBDXPageState extends State<RoomBDXPage> {
　　　　...
　　　　@override
　　　　Widget build(BuildContext context) {
　　　　　　print(window.physicalSize);//能夠調用到
　　　　...
https://docs.flutter.io/flutter/widgets/StreamBuilder-class.html
　　Widget that builds itself based on the latest snapshot of interaction with a Stream.

　　 Inheritance

https://docs.flutter.io/flutter/widgets/SafeArea-class.html

　　A widget that insets its child by sufficient padding to avoid intrusions by the operating system.

　　For example, this will indent the child by enough to avoid the status bar at the top of the screen.

　　It will also indent the child by the amount necessary to avoid The Notch on the iPhone X, or other similar creative physical features of the display.

　　When a minimum padding is specified, the greater of the minimum padding or the safe area padding will be applied.

https://docs.flutter.io/flutter/widgets/Positioned-class.html

　　A widget that controls where a child of a Stack is positioned.

https://docs.flutter.io/flutter/material/Material-class.html

　　A piece of material.

<動畫方面>
https://docs.flutter.io/flutter/widgets/SingleTickerProviderStateMixin-class.html

　　Provides a single Ticker that is configured to only tick while the current tree is enabled, as defined by TickerMode.

　　To create the AnimationController in a State that only uses a single AnimationController, mix in this class, then

　　pass vsync: this to the animation controller constructor.

　　This mixin only supports vending a single ticker. If you might have multiple AnimationController objects over the

　　lifetime of the State, use a full TickerProviderStateMixin instead.

https://docs.flutter.io/flutter/animation/AnimationController-class.html
　　A controller for an animation.
https://docs.flutter.io/flutter/animation/Animation-class.html
　　An animation with a value of type .
　　An animation consists of a value (of type ) together with a status.
https://docs.flutter.io/flutter/animation/Tween-class.html
TT

　　A linear interpolation between a beginning and ending value.Tween is useful if you want to

　　interpolate across a range.

　　To use a Tween object with an animation, call the Tween object's animate method and pass it the Animation object

　　that you want to modify.

https://docs.flutter.io/flutter/animation/CurvedAnimation-class.html
　　Flutter offers a set of pre-defined Curved variations. The list is shown here below:

　　To use these variations:

　　Animation<double> angleAnimation = new Tween(begin: 0.0, end: pi/2).animate( 　　new CurvedAnimation( 　　parent: _controller, 　　curve: Curves.ease, 　　reverseCurve: Curves.easeOut 　　));

　　This creates a variation of value [0; π/2], which varies using the

Curves.ease when the animation goes 0.0 -> π/2 (= forward)
Curves.easeOut when the animation goes π/2 -> 0.0 (= reverse)

https://docs.flutter.io/flutter/dart-ui/Offset-class.html
　　An immutable 2D floating-point offset.
https://docs.flutter.io/flutter/animation/Interval-class.html

　　A curve that is 0.0 until begin, then curved (according to curve from 0.0 to 1.0 at end, then 1.0.

　　An Interval can be used to delay an animation. For example, a six second animation that uses an Interval with

　　its begin set to 0.5 and its end set to 1.0 will essentially become a three-second animation that starts three

　　seconds later.

https://docs.flutter.io/flutter/widgets/Transform-class.html

　　A widget that applies a transformation before painting its child.