美文网首页
flutter demo (一):居中的按钮

flutter demo (一):居中的按钮

作者: zty5678 | 来源:发表于2018-06-27 21:05 被阅读2521次

    效果图:


    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<MyApp> {
      @override
      Widget build(BuildContext context) {
        final key = new GlobalKey<ScaffoldState>();
        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 demo (一):居中的按钮

          本文链接:https://www.haomeiwen.com/subject/zkiiyftx.html