Entrar Ainda não tem acesso?
3
respostas

Tela Flutter com uma pequena diferença

Referente ao curso Flutter: Widgets, Stateless, Stateful, Imagens e Animações, no capítulo Utilizando Widgets e atividade Faça como eu fiz: uma nova tela

por Vinicius Marques Andrade
| 141.9k xp | 9 posts

Decidi postar a tela que eu tentei replicar no exercício, porém com algumas diferenças de Widgets, porque eu estava lendo a documentação e estou utilizando o Material Design do iOS que no caso é o pacote Cupertino que da pra importar no próprio Flutter.

A minha tela está dessa forma, acrescentando um botão também, segue abaixo: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Código da main

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_course/home_screen.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData.dark(),
        title: 'Flutter Demo',
        home: const HomeScreen()
    );
  }
}


//         Container(
//           color: Colors.white,
//           child: Column(
//             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
//             crossAxisAlignment: CrossAxisAlignment.center,
//             children: [
//               Stack(
//                 alignment: AlignmentDirectional.center,
//                 children: [
//                   Container(color: Colors.red, width: 100, height: 100),
//                   Container(color: Colors.blue, width: 50, height: 50)
//                 ],
//               ),
//               Stack(
//                 alignment: AlignmentDirectional.center,
//                 children: [
//                   Container(color: Colors.greenAccent, width: 100, height: 100),
//                   Container(
//                       color: Colors.purple.shade400, width: 50, height: 50)
//                 ],
//               ),
//               Row(
//                 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
//                 crossAxisAlignment: CrossAxisAlignment.center,
//                 children: [
//                   Container(color: Colors.purple, height: 50, width: 50),
//                   Container(
//                       color: Colors.amber.shade200, height: 50, width: 50),
//                   Container(color: Colors.cyan.shade300, height: 50, width: 50),
//                 ],
//               ),
//               Container(
//                 color: Colors.amber,
//                 height: 30,
//                 width: 300,
//                 child: Text(
//                   'Olá mundo',
//                   style: TextStyle(
//                     color: Colors.black,
//                     fontSize: 25,
//                   ),
//                   textAlign: TextAlign.center,
//                 ),
//               ),
//               ElevatedButton(
//                   onPressed: (){},
//                   child: Text('Aperte o botão!'))
//             ],
//           ),
//         ));
//   }
// }
3 respostas
por Vinicius Marques Andrade
| 141.9k xp | 9 posts

Não deu pra adicionar o resto do código devido ao limite de linhas.

Aqui está o código separado da tela replicada para boas práticas

import 'package:flutter/cupertino.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
        navigationBar: const CupertinoNavigationBar(
          backgroundColor: CupertinoColors.systemPurple,
          middle: Text(
            'Navigation Bar Test',
            style: TextStyle(
              fontSize: 20,
              color: CupertinoColors.white,
            ),
          ),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            CupertinoButton.filled(
                child: const Text(
                  'Button',
                  style: TextStyle(
                      color: CupertinoColors.white,
                      fontSize: 15
                  ),
                ),
                onPressed: () {
                  print('Teste button');
                }),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  color: CupertinoColors.systemPink,
                  width: 100,
                  height: 100,
                ),
                Container(
                  color: CupertinoColors.systemPurple,
                  width: 100,
                  height: 100,
                ),
                Container(
                  color: CupertinoColors.activeBlue,
                  width: 100,
                  height: 100,
                ),

              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  color: CupertinoColors.activeGreen,
                  width: 100,
                  height: 100,
                ),
                Container(
                  color: CupertinoColors.activeOrange,
                  width: 100,
                  height: 100,
                ),
                Container(
                  color: CupertinoColors.destructiveRed,
                  width: 100,
                  height: 100,
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  color: CupertinoColors.systemTeal,
                  width: 100,
                  height: 100,
                ),
                Container(
                  color: CupertinoColors.extraLightBackgroundGray,
                  width: 100,
                  height: 100,
                ),
                Container(
                  color: CupertinoColors.systemIndigo,
                  width: 100,
                  height: 100,
                ),
              ],
            ),
          ],
        ));
  }
}
por Matheus Brandino
| 4803.7k xp | 10196 posts
Alura Scuba Team Mobile Software Engineer

Fala Vinicius, de boa ?

Cara não sei se ficou com alguma dúvida em si, mas tipo, o lance de usar cupertino ou material faz com que alguns aspectos sejam diferentes, a galera da apple tem uma pegada diferente do android e tá super normal isso. Outra solução que tu pode usar é pegar de widgets, que é uma parada mais "comum"...

por Vinicius Marques Andrade
| 141.9k xp | 9 posts

Boa tarde.

Duvida eu não fiquei, eu só quis compartilhar o código mesmo com o Cupertino, porque eu fiquei lendo a documentação de ambos e estava fazendo apenas uns testes e brincando um pouco com o design em si.