1
resposta

[Projeto] Resposta do exercicio - Vou colocar uma duvida no inicio.

Alguem sabe a diferença entre spaceAround & spacebetween?

Dica para quem esta com muita dificuldade... Estudar Html e Css ajuda rs

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home:Container(
        color: Colors.black,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(color: Colors.red,height: 50, width: 50,),
                Container(color:Colors.blue,height: 50,width: 50,),
                Container(color: Colors.amber, height: 50, width: 50,)
              ],
            ),
            Row(
              mainAxisAlignment : MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.start,

              children: [
                Container(color: Colors.blue, height: 50, width: 50,),
                Container(color:Colors.amber,height: 50,width: 50,),
                Container(color:Colors.red,height: 50,width: 50,)

              ],
            ),



            Row(

              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.end,
            children: [

              Container(color: Colors.red, height: 50, width: 50,),
              Container(color:Colors.green,height: 50,width: 50,),
              Container(color:Colors.white,height: 50,width: 50,)
            ],

            ),

          ],
        ),

      ),
      );

  }
}
1 resposta

Olá, Raphael!

A diferença entre spaceAround e spaceBetween está relacionada à distribuição do espaço entre os elementos em um Row ou Column.

  • spaceAround: Distribui o espaço igualmente entre os elementos e nas extremidades. Ou seja, o espaço é dividido igualmente antes do primeiro elemento, entre os elementos e depois do último elemento. Veja um exemplo:
Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Container(color: Colors.red, height: 50, width: 50,),
    Container(color: Colors.blue, height: 50, width: 50,),
    Container(color: Colors.amber, height: 50, width: 50,),
  ],
)

Nesse exemplo, o espaço entre os elementos será dividido igualmente, resultando em um espaço maior antes do primeiro elemento e depois do último elemento.

  • spaceBetween: Distribui o espaço igualmente apenas entre os elementos. Ou seja, o espaço é dividido igualmente apenas entre os elementos, sem espaços nas extremidades. Veja um exemplo:
Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Container(color: Colors.red, height: 50, width: 50,),
    Container(color: Colors.blue, height: 50, width: 50,),
    Container(color: Colors.amber, height: 50, width: 50,),
  ],
)

Nesse exemplo, o espaço entre os elementos será dividido igualmente, sem espaços antes do primeiro elemento e depois do último elemento.

Espero ter ajudado! Bons estudos e continue praticando!