居中并调整FAB的大小

Question

我正试图在一个应用程序中添加一个按钮，它直接位于屏幕的中心，并且也是一个自定义大小。

从测试来看，我可以实现其中一个或另一个，但我一直无法做到这两点。下面是我是如何做到每一个的。

我的main. dart文件总是保持不变。

import 'package:flutter/material.dart';
import './surpriseme.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.pink[300],
      ),
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text(
            "Test",
            style: TextStyle(
                fontSize: 35,
                color: Colors.pink[900]),
          ),
          leading: IconButton(
            icon: Image.asset('assets/images/SO.jpg'),
            onPressed: () {},
          ),
        ),
        body: SurpriseMe(),
      ),
    );
  }
}

下面是我的surpriseme.dart文件的样子，如果我想要一个可调整大小的按钮。

import 'package:flutter/material.dart';

class SurpriseMe extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 150.0,
        width: 150.0,
        child: FittedBox(
        child: FloatingActionButton(onPressed: () {}),
        ),
    );
  }
}

如果我想在中间放一个按钮，它的样子是这样的。

import 'package:flutter/material.dart';

class SurpriseMe extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                 FloatingActionButton(
                  splashColor: Colors.pink[900],
                 // color: Colors.pink[300],
                  child:  Text(
                    "Surprise me!",
                    style: TextStyle(fontSize: 20.0, color: Colors.pink[900]),
                  ),
                  onPressed: () {},

                ),
                new Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10.0),
                ),
              ],
            ),
          ),
        ));
  }
}

有什么方法可以让我同时实现这两个功能吗？

干杯。

Answer 1

是的，这是可能的，尝试下面的代码，它的工作原理是完美的。

如果你使用下面的方法，你就可以给按钮一个自定义的高度和一个自定义的宽度。

 // the align widget centers the button to the center of the screen
    return Align(
      alignment: Alignment.center,
      // the inkwell widget makes it clickable and gives it a splash color
      child: InkWell(
        onTap: () => print('Stop tapping me...'),
        splashColor: Colors.pink[900],
        child: Container(
          // set your desired height here
          height: 80,
          // set your desired width here
          width: 80,
          // decoration property gives it a color and makes it round like a floating action button
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.pink[300],
          ),
          // add your desired padding here
          padding: const EdgeInsets.symmetric(vertical: 10.0),
          // add the child element
          child: Center(
            child: Text(
              'Surprise Me',
              // style of the text
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 18.0, color: Colors.pink[900],),
            ),
          ),
        ),
      ),
    );

输出。

我希望这能帮到你

Answer 2

要做到这一点，你可以使用中心部件和Scaffold的浮动动作按钮属性。

Scaffold(
  floatingActionButton: Center(
    child: Container(
      width: 100,
      height: 100,
      child: FloatingActionButton(
        child: Icon(Icons.add, size: 50,),
        onPressed: () {},
      ),
    ),
  ),
);