flutter demo (一):居中的按钮

链接到

效果图:

 

flutter demo (一):居中的按钮_第1张图片

1.jpg

代码如下:

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
  @override
  TestMyAppState createState() => new TestMyAppState();
}

class TestMyAppState extends State {
  @override
  Widget build(BuildContext context) {
    final key = new GlobalKey();
    return new MaterialApp(
      home: new Scaffold(
        key: key,
        appBar: new AppBar(title: new Text("test app")),
        body: new Container(
            alignment: Alignment.center,
            child: new Container(
              child: new RaisedButton(
                padding: new EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0), //padding
                child: new Text(
                  'test',
                  style: new TextStyle(
                    fontSize: 18.0, //textsize
                    color: Colors.white,// textcolor
                  ),
                ),
                color: Theme.of(context).accentColor,
                elevation: 4.0,  //shadow
                splashColor: Colors.blueGrey, 
                onPressed: () {
                  //click event: show a snack bar
                  key.currentState.showSnackBar(new SnackBar(
                    content: new Text('Hello!'),
                  ));
                }
              ),
            )),
      ),
    );
  }
}

目前flutter官方暂时未提供toast工具类,如果想弹出toast, 可以利用第三方库fluttertoast:https://github.com/PonnamKarthik/FlutterToast 。
目前其作者提交到官方仓库的最新版本是2.0.3: https://pub.dartlang.org/packages/fluttertoast 。

如何添加依赖?
找到项目中的 pubspec.yaml 文件,

name: layouts_flutter
description: A new Flutter application.

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.0
  fluttertoast: ^2.0.3   #添加到这里即可

dev_dependencies:
  flutter_test:
    sdk: flutter
...

修改完点击右上角的"Packages get"即可。

显示toast的代码:

Fluttertoast.showToast(
  msg: "This is Center Short Toast",
  toastLength: Toast.LENGTH_SHORT,
  gravity: ToastGravity.BOTTOM,
  timeInSecForIos: 1
);                    

注意不要忘了添加import:

import 'package:fluttertoast/fluttertoast.dart';


 

你可能感兴趣的:(Flutter)