Widget central en Flutter

El widget central viene integrado con flutter, alinea su widget secundario con el centro del espacio disponible en la pantalla. El tamaño de este widget será lo más grande posible si las propiedades widthFactor y heightFactor se establecen en nulo y las dimensiones están restringidas. Y en caso de que las dimensiones no estén restringidas y el factor de anchura y el factor de altura estén establecidos en nulo , el widget central toma el tamaño de su widget secundario. Entendamos esto con la ayuda de ejemplos.

Constructor:

Syntax:
Center({Key key, 
double widthFactor, 
double heightFactor, 
Widget child})

Propiedades del widget central:

• widthFactor: esta propiedad toma un valor doble como parámetro y establece el ancho del widget Center como el ancho del niño multiplicado por este factor. Por ejemplo, si se establece en 3.0, el widget central ocupará tres veces el tamaño de su widget secundario.
• heightFactor: esta propiedad también toma un valor doble como parámetro y establece la altura del widget Center como la altura del niño multiplicada por este factor.
• child: esta propiedad toma un widget como un parámetro que se mostrará dentro del widget Center en la pantalla.
• alineación: esta propiedad toma AlignmentGeometry como el valor del parámetro para determinar cómo se alineará el widget secundario con respecto al widget Center .

Ejemplo:

El archivo main.dart .

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  // This widget is
  //the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        // heightFactor: 3,
        // widthFactor: 0.8,
        child: Container(
          color: Colors.green,
          child: Text(
            'Center Widget',
            textScaleFactor: 3,
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

Producción:

Cuando se ejecuta el código anterior, el resultado se muestra a continuación:

Si las propiedades se definen de la siguiente manera:

heightFactor: 3,

Se pueden observar los siguientes cambios de diseño:

Si las propiedades se definen de la siguiente manera:

widthFactor: 1,

Se pueden observar los siguientes cambios de diseño:

Si las propiedades se definen de la siguiente manera:

heightFactor: 3,
widthFactor: 0.8,

Se pueden observar los siguientes cambios de diseño:

Explicación:

• Cree el widget Centro con su elemento secundario como Contenedor .
• Establezca heightFactor si es necesario.
• Establezca widthFactor si es necesario.