Центрирование и изменение размера 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

Для этого вы можете использовать виджет Center и свойство floatctionctionutut Scaffold:

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