Adicionando uma tela inicial aos aplicativos Flutter

142

Como você abordaria a adição de uma tela inicial aos aplicativos Flutter? Ele deve carregar e exibir antes de qualquer outro conteúdo. Atualmente, há um breve flash de cor antes do carregamento do widget Andaime (home: X).

Pieter
fonte
Não sei se é a maneira correta de adicionar uma tela inicial, definindo um timer personalizado. Não gosto de manter os processadores ociosos. Por que não fazer tarefas domésticas como verificar os arquivos ou diretórios necessários, sincronizar alguns logs ou fazer backup de alguns arquivos no No entanto, após todos os 3-4 segundos, leva muito tempo para um processador.
maheshmnj
1
Este link explica como fazê-lo: flutter.dev/docs/development/ui/splash-screen/…
live-love

Respostas:

250

Quero trazer um pouco mais de luz sobre a maneira real de fazer uma tela inicial no Flutter.

Eu segui um pouco o rastreio aqui e vi que as coisas não estão tão ruins na tela inicial em Flutter.

Talvez a maioria dos desenvolvedores (como eu) esteja pensando que não há tela Splash por padrão no Flutter e precisem fazer algo sobre isso. Existe uma tela inicial, mas é com fundo branco e ninguém pode entender que já existe uma tela inicial para iOS e Android por padrão.

A única coisa que o desenvolvedor precisa fazer é colocar a imagem da marca no lugar certo e a tela inicial começará a funcionar assim.

Aqui está como você pode fazer isso passo a passo:

Primeiro no Android (porque é a minha plataforma favorita :))

  1. Encontre a pasta "android" no seu projeto Flutter.

  2. Navegue até a pasta app -> src -> main -> res e coloque todas as variantes da sua imagem de marca nas pastas correspondentes. Por exemplo:

  • a imagem com densidade 1 precisa ser colocada em mipmap-mdpi,
  • a imagem com densidade 1.5 precisa ser colocada em mipmap-hdpi,
  • a imagem com densidade 2 precisa ser colocada em mipmap-xdpi,
  • a imagem com densidade 3 precisa ser colocada em mipmap-xxdpi,
  • a imagem com densidade 4 precisa ser colocada em mipmap-xxxdpi,

Por padrão, na pasta android, não há drawable-mdpi, drawable-hdpi, etc., mas podemos criá-los se quisermos. Por esse motivo, as imagens precisam ser colocadas nas pastas mipmap. Além disso, o código XML padrão sobre a tela Splash (no Android) usará o @mipmap, em vez do recurso @drawable (você pode alterá-lo, se desejar).

  1. A última etapa no Android é descomentar alguns dos códigos XML no arquivo drawable / launch_background.xml. Navegue até o aplicativo -> src -> principal -> res-> drawable e abra o launch_background.xml. Dentro deste arquivo, você verá por que o fundo da tela do Slash é branco. Para aplicar a imagem de marca que colocamos na etapa 2, precisamos descomentar alguns dos códigos XML do seu arquivo launch_background.xml. Após a alteração, o código deve se parecer com:

     <!--<item android:drawable="@android:color/white" />-->
    
     <item>
    
         <bitmap
             android:gravity="center"
             android:src="@mipmap/your_image_name" />
    
     </item>

Por favor, preste atenção ao comentar o código XML do plano de fundo branco e descomentar o código da imagem do mipmap. Se alguém estiver interessado, o arquivo launch_background.xml será usado no arquivo styles.xml.

Segundo no iOS:

  1. Encontre a pasta "ios" no seu projeto Flutter.

  2. Vá para Runner -> Assets.xcassets -> LaunchImage.imageset. Deve haver LaunchImage.png, [email protected], etc. Agora você deve substituir essas imagens pelas variantes de imagem de marca. Por exemplo:

Se não estou errado, [email protected] não existe por padrão, mas você pode criar um facilmente. Se [email protected] não existir, você também precisará declará-lo no arquivo Contents.json, que está no mesmo diretório que as imagens. Após a alteração, meu arquivo Contents.json se parece com o seguinte:

{
  "images" : [
    {
      "idiom" : "universal",
      "filename" : "LaunchImage.png",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
      "filename" : "[email protected]",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "filename" : "[email protected]",
      "scale" : "3x"
    },
    {
      "idiom" : "universal",
      "filename" : "[email protected]",
      "scale" : "4x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

Isso deve ser tudo o que você precisa. Na próxima vez em que você executar o aplicativo, no Android ou iOS, você deverá ter a Tela Inicial correta com a imagem da marca que você adicionou.

obrigado

Stoycho Andreev
fonte
4
Ocorreu um erro Cannot resolve symbol '@mipmap/ic_launcher'no Android Studio 3.1.1 (mesmo após a reconstrução do cache), no entanto, o aplicativo foi compilado e executado sem erros, e o gráfico do iniciador é exibido.
BNAI
1
Eu tenho o mesmo problema, no entanto, não posso executá-lo, pois em tempo de execução ele falha e me diz que a imagem está ausente. mas não pode resolver o mipmap por algum motivo. Alguém tem uma idéia do porquê disso?
Carlosx2
Olá pessoal, não sei por que você tem esse problema, mas para mim parece um problema de sincronização de projetos (não há outro motivo para não encontrar o recurso, se houver). Não sei como resolvê-lo porque nunca tive esse problema, mas tente sincronizar o projeto, limpar, reconstruir etc. o que for possível em sua IDÉIA. Tente também usar o recurso na pasta drawable e substitua a anotação mipmap pela anotação drawable. Estou apenas supondo agora :)
Stoycho Andreev
1
Curioso para saber por que você está adicionando a imagem 4x. O XCode parece esperar apenas 3x; existe um motivo para adicionar o 4x?
Sbilstein 21/05
3
A documentação oficial cobre isso.
rmalviya 11/01
28

Se você flutter createcriou seu projeto, pode seguir as etapas em https://flutter.io/assets-and-images/#updating-the-launch-screen .

xster
fonte
Eu sou o único a receber seus ícones na tela inicial e / ou na tela inicial ao atualizar os ícones? Usando este método exato ...?
31919 ChrisH
21

O Flutter, na verdade, oferece uma maneira mais simples de adicionar o Splash Screen ao nosso aplicativo. Primeiro, precisamos criar uma página básica à medida que projetamos outras telas de aplicativos. Você precisa torná-lo um StatefulWidget, pois o estado disso será alterado em alguns segundos.

import 'dart:async';
import 'package:flutter/material.dart';
import 'home.dart';

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Timer(
        Duration(seconds: 3),
        () => Navigator.of(context).pushReplacement(MaterialPageRoute(
            builder: (BuildContext context) => HomeScreen())));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Image.asset('assets/splash.png'),
      ),
    );
  }
}

Lógica Dentro do initState () , chame um Timer () com a duração, como você deseja, eu fiz 3 segundos, uma vez feito, empurre o navegador para a tela inicial do nosso aplicativo.

Nota: O aplicativo deve mostrar a tela de apresentação apenas uma vez; o usuário não deve voltar para ela novamente ao pressionar o botão Voltar. Para isso, usamos Navigator.pushReplacement () , ele será movido para uma nova tela e removerá a tela anterior da pilha do histórico de navegação.

Para uma melhor compreensão, visite Flutter: crie sua própria tela inicial

kowsalya_ckar
fonte
7
A tela inicial branca padrão ainda será exibida por mais de 1 segundo antes que essa tela personalizada seja exibida. Tem que substituir nos projetos xcode e android gerados para eliminá-lo.
D3vtoolsmith 22/03/19
Sim. A tela spalsh padrão no iOS e no Android sempre será exibida; essa tela de toque flutuante é uma adição a isso.
Mahesh Peri
A questão é que este exemplo não é confiável .... E se o seu aplicativo for carregado por mais de 3s devido a motivos como a conectividade de rede?
emanuel sanga 17/04
Para personalização adicional, eu apoio mais esta resposta. Quero primeiro executar uma solicitação HTTP enquanto exibe uma tela inicial. Essa abordagem foi muito mais fácil
Idris Stack
16

Ainda não há um bom exemplo disso, mas você pode fazê-lo usando as ferramentas nativas de cada plataforma:

iOS: https://docs.nativescript.org/publishing/creating-launch-screens-ios

Android: https://www.bignerdranch.com/blog/splash-screens-the-right-way/

Assine a edição 8147 para obter atualizações sobre o código de exemplo para telas de apresentação. Se o brilho preto entre a tela inicial e o aplicativo no iOS o incomodar, assine a edição 8127 para obter atualizações.

Editar: em 31 de agosto de 2017, o suporte aprimorado para telas iniciais está disponível no novo modelo de projeto. Veja # 11505 .

Collin Jackson
fonte
Existe um exemplo de como realmente adicionar uma tela de abertura. Quando inicio o novo modelo, não vejo uma tela de abertura
Ride Sun
@RideSun consulte minha resposta
Stoycho Andreev
1
Como posso fazer a tela inicial durar mais? devo alterar algum código na atividade?
Zero.zero.seven
Mas eu preciso de mais, por exemplo, quando durante respingo em seguida, criar / importar db local, então só termina respingo
stuckedoverflow
14

Para Android, acesse android> app> src> main> res> drawable> launcher_background.xml

Agora remova o comentário e substitua @ mipmap / launch_image pela localização da sua imagem.

<item>
      <bitmap
          android:gravity="center"
          android:src="@mipmap/launch_image" />
</item>

Você pode alterar a cor da sua tela aqui -

<item android:drawable="@android:color/white" />
Smruti Ranjan Rana
fonte
Isso funcionou para mim ... mas a parte iOS ... não jogar tão bom
IrishGringo
1
verificar isso - flutter.io/assets-and-images/#updating-the-launch-screen
Smruti Ranjan Rana
Eu descobri ... aparentemente a imagem do iOS estava ruim. O iOS e o ANDROID funcionam perfeitamente agora. alarme falso
IrishGringo 30/06
@SmrutiRanjanRana qual é o tamanho ideal para esta imagem?
Mattias
1
Esta resposta seria muito mais útil se houvesse um exemplo da localização da imagem. Caso contrário, o usuário precisará adivinhar como adicionar o caminho.
Robin Manoli
12

A maneira mais fácil de adicionar uma tela inicial no flutter é usando este pacote: https://pub.dev/packages/flutter_native_splash

insira a descrição da imagem aqui

Guia de instalação (pelo autor do pacote):

1. Configurando a tela inicial

Adicione suas configurações ao arquivo pubspec.yaml do seu projeto ou crie um arquivo na pasta raiz do projeto denominada flutter_native_splash.yaml com suas configurações.

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"

a imagem deve ser um arquivo png.

Você também pode usar # em cores. color: "# 42a5f5" Você também pode definir android ou ios como false se não quiser criar uma tela inicial para uma plataforma específica.

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  android: false

Caso sua imagem use toda a tela disponível (largura e altura), você pode usar a propriedade fill.

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  fill: true

Nota: a propriedade fill ainda não foi implementada para telas de apresentação do iOS.

Se você deseja desativar a tela inicial de tela cheia no Android, pode usar a propriedade android_disable_fullscreen.

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  android_disable_fullscreen: true

2. Execute o pacote

Após adicionar suas configurações, execute o pacote com

flutter pub pub run flutter_native_splash:create Quando o pacote terminar de executar, a tela inicial estará pronta.

patreu22
fonte
8

Você deve tentar o código abaixo, trabalhou para mim

import 'dart:async';
import 'package:attendance/components/appbar.dart';
import 'package:attendance/homepage.dart';
import 'package:flutter/material.dart';

class _SplashScreenState extends State<SplashScreen>
with SingleTickerProviderStateMixin {


void handleTimeout() {
  Navigator.of(context).pushReplacement(new MaterialPageRoute(
    builder: (BuildContext context) => new MyHomePage()));
}

startTimeout() async {
  var duration = const Duration(seconds: 3);
  return new Timer(duration, handleTimeout);
}

@override
void initState() {
  // TODO: implement initState
  super.initState();

  _iconAnimationController = new AnimationController(
      vsync: this, duration: new Duration(milliseconds: 2000));

  _iconAnimation = new CurvedAnimation(
      parent: _iconAnimationController, curve: Curves.easeIn);
  _iconAnimation.addListener(() => this.setState(() {}));

  _iconAnimationController.forward();

  startTimeout();
}

@override
Widget build(BuildContext context) {
  return new Scaffold(
    body: new Scaffold(
      body: new Center(
        child: new Image(
        image: new AssetImage("images/logo.png"),
        width: _iconAnimation.value * 100,
        height: _iconAnimation.value * 100,
      )),
    ),
  );
}
}
Jaldhi Bhatt
fonte
você pode postar o código completo (um código que podemos executar independentemente, sem a necessidade de definir nossas variáveis) ou um link no github?
Biniam
8

as pessoas que estão recebendo o erro como imagem não encontrada após aplicar a resposta verificada não se esqueça de adicionar @ mipmap / ic_launcher em vez de @ mipmap / ic_launcher.png

Md Sadab Wasim
fonte
Seu IDE diria isso assim que você passasse o cursor sobre o erro
Ojonugwa Jude Ochalifu 25/06
7

@Collin Jackson e @Sniper estão certos. Você pode seguir estas etapas para configurar imagens de inicialização no Android e iOS, respectivamente. Em seu MyApp (), em seu initState (), você pode usar Future.delayed para configurar um timer ou chamar qualquer API. Até que a resposta seja retornada do futuro, seus ícones de inicialização serão mostrados e, à medida que a resposta chegar, você poderá ir para a tela que deseja acessar após a tela inicial. Você pode ver este link: Tela Flutter Splash

Vikas
fonte
1
Ao vincular a outra página da SO, publique aqui a parte do conteúdo para evitar links mortos.
rak007
4

Adicionar uma página como abaixo e rotear pode ajudar

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutkart/utils/flutkart.dart';
import 'package:flutkart/utils/my_navigator.dart';

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Timer(Duration(seconds: 5), () => MyNavigator.goToIntro(context));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(color: Colors.redAccent),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Expanded(
                flex: 2,
                child: Container(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      CircleAvatar(
                        backgroundColor: Colors.white,
                        radius: 50.0,
                        child: Icon(
                          Icons.shopping_cart,
                          color: Colors.greenAccent,
                          size: 50.0,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: 10.0),
                      ),
                      Text(
                        Flutkart.name,
                        style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 24.0),
                      )
                    ],
                  ),
                ),
              ),
              Expanded(
                flex: 1,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    CircularProgressIndicator(),
                    Padding(
                      padding: EdgeInsets.only(top: 20.0),
                    ),
                    Text(
                      Flutkart.store,
                      softWrap: true,
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 18.0,
                          color: Colors.white),
                    )
                  ],
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

Se você quiser seguir em frente, consulte: https://www.youtube.com/watch?v=FNBuo-7zg2Q

goops17
fonte
4

Várias maneiras de fazer isso, mas a mais fácil que eu uso é:

Para os Ícones de inicialização, uso a biblioteca do flutter Ícone do Flutter Launcher

Para a tela inicial personalizada, crio diferentes resoluções de tela e adiciono as imagens iniciais na pasta mipmap conforme a resolução do Android.

A última parte é ajustar o launch_background.xml na pasta drawable na pasta res no Android.

Basta alterar seu código para se parecer com abaixo:

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- <item android:drawable="@android:color/white" />
    <item android:drawable="@drawable/<splashfilename>" />     --> -->

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/<Your splash image name here as per the mipmap folder>"/>
    </item>
</layer-list>

Poucos desenvolvedores que vi adicionaram o splash como desenhável, tentei isso, mas de alguma forma a compilação falha no Flutter 1.0.0 e no Dart SDK 2.0+. Portanto, eu prefiro adicionar o splash na seção bitmap.

A criação da tela inicial do iOS é bastante mais simples.

Na pasta Runner no iOS, atualize os arquivos LaunchImage.png com suas imagens de tela Splash personalizadas com os mesmos nomes que LaunchImage.png @ 2x, @ 3x, @ 4x.

Além disso, acho bom ter uma imagem 4x também no LaunchImage.imageset. Atualize seu código no Content.json com as seguintes linhas, abaixo da escala 3x para adicionar uma opção de escala 4x:

{
      "idiom" : "universal",
      "filename" : "[email protected]",
      "scale" : "4x"
    }
Prashant Gupta
fonte
4

faça o seu material App como este

=> Adicionar dependência

=> import import 'pacote: splashscreen / splashscreen.dart';

import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.dart';
import 'package:tic_tac_toe/HomePage.dart';
void main(){
  runApp(
    MaterialApp(
      darkTheme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: new MyApp(),
    )
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new SplashScreen(
      seconds: 6,
      navigateAfterSeconds: new HomePage(),
      title: new Text('Welcome',
      style: new TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 26.0,
        color: Colors.purple,
       ),
      ),
      image: Image.asset("images/pic9.png"),
      backgroundColor: Colors.white,
      photoSize: 150.0,
    );
  }
}

A saída final da tela assim pode ser alterada em segundo, de acordo com suas necessidades, o círculo será redondo circular

insira a descrição da imagem aqui

Campeão 96k
fonte
Adicionar dependências => dynamic_theme: ^ 1.0.1
Champ 96k 13/01
Não há importação para
SplashScreen
sim, exatamente, existem várias maneiras de fazer isso, mas na resposta, vou lhe dizer como você pode adicionar a tela inicial com a ajuda deste pacote pub.dev/packages/dynamic_theme
Champ 96k
4

Essa é a melhor maneira, sem erros, de adicionar uma tela inicial dinâmica no Flutter.

MAIN.DART

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

void main() => runApp(MaterialApp(
      title: 'GridView Demo',
      home: SplashScreen(),
      theme: ThemeData(
        primarySwatch: Colors.red,
        accentColor: Color(0xFF761322),
      ),
      routes: <String, WidgetBuilder>{
        SPLASH_SCREEN: (BuildContext context) => SplashScreen(),
        HOME_SCREEN: (BuildContext context) => BasicTable(),
        //GRID_ITEM_DETAILS_SCREEN: (BuildContext context) => GridItemDetails(),
      },
    ));


SPLASHSCREEN.DART

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:app_example/constants.dart';


class SplashScreen extends StatefulWidget {
  @override
  SplashScreenState createState() => new SplashScreenState();
}

class SplashScreenState extends State<SplashScreen>
    with SingleTickerProviderStateMixin {
  var _visible = true;

  AnimationController animationController;
  Animation<double> animation;

  startTime() async {
    var _duration = new Duration(seconds: 3);
    return new Timer(_duration, navigationPage);
  }

  void navigationPage() {
    Navigator.of(context).pushReplacementNamed(HOME_SCREEN);
  }

@override
dispose() {
  animationController.dispose();  
  super.dispose();
}

  @override
  void initState() {
    super.initState();
    animationController = new AnimationController(
      vsync: this,
      duration: new Duration(seconds: 2),
    );
    animation =
        new CurvedAnimation(parent: animationController, curve: Curves.easeOut);

    animation.addListener(() => this.setState(() {}));
    animationController.forward();

    setState(() {
      _visible = !_visible;
    });
    startTime();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          new Column(
            mainAxisAlignment: MainAxisAlignment.end,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(bottom: 30.0),
                child: new Image.asset(
                  'assets/images/powered_by.png',
                  height: 25.0,
                  fit: BoxFit.scaleDown,
                ),
              )
            ],
          ),
          new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Image.asset(
                'assets/images/logo.png',
                width: animation.value * 250,
                height: animation.value * 250,
              ),
            ],
          ),
        ],
      ),
    );
  }
}


CONSTANTS.DART

String SPLASH_SCREEN='SPLASH_SCREEN';
String HOME_SCREEN='HOME_SCREEN';

HOMESCREEN.DART

import 'package:flutter/material.dart';

class BasicTable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Table Widget")),
      body: Center(child: Text("Table Widget")),
    );
  }
}
raman raman
fonte
3

O código de Jaldhi Bhatt não funciona para mim.

O Flutter lança uma ' operação do Navegador solicitada com um contexto que não inclui um Navegador '.

Corrigi o código que envolve o componente de consumidor do Navegador dentro de outro componente que inicializa o contexto do Navegador usando rotas, conforme mencionado neste artigo.

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:my-app/view/main-view.dart';

class SplashView extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: Builder(
          builder: (context) => new _SplashContent(),
        ),
        routes: <String, WidgetBuilder>{
          '/main': (BuildContext context) => new MainView()}
    );
  }
}

class _SplashContent extends StatefulWidget{

  @override
  _SplashContentState createState() => new _SplashContentState();
}

class _SplashContentState extends State<_SplashContent>
    with SingleTickerProviderStateMixin {

  var _iconAnimationController;
  var _iconAnimation;

  startTimeout() async {
    var duration = const Duration(seconds: 3);
    return new Timer(duration, handleTimeout);
  }

  void handleTimeout() {
    Navigator.pushReplacementNamed(context, "/main");
  }

  @override
  void initState() {
    super.initState();

    _iconAnimationController = new AnimationController(
        vsync: this, duration: new Duration(milliseconds: 2000));

    _iconAnimation = new CurvedAnimation(
        parent: _iconAnimationController, curve: Curves.easeIn);
    _iconAnimation.addListener(() => this.setState(() {}));

    _iconAnimationController.forward();

    startTimeout();
  }

  @override
  Widget build(BuildContext context) {
    return new Center(
        child: new Image(
          image: new AssetImage("images/logo.png"),
          width: _iconAnimation.value * 100,
          height: _iconAnimation.value * 100,
        )
    );
  }
}
GiBi
fonte
2
Você pode adicionar alguma explicação também? Um bloco de código simples por si só não é tudo o que informativo
CertainPerformance
3

Caso você queira uma tela inicial secundária (depois da nativa), aqui está um exemplo simples que funciona:

class SplashPage extends StatelessWidget {
  SplashPage(BuildContext context) {
    Future.delayed(const Duration(seconds: 3), () {
      // Navigate here to next screen
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text('Splash screen here');
  }
}
david72
fonte
3

O Flutter fornece a capacidade de ter uma tela inicial por padrão, mas há muitos plug-ins que podem fazer o trabalho. Se você não deseja usar um plug-in para a tarefa e está preocupado que a adição de um novo plug-in possa afetar o tamanho do aplicativo. Então você pode fazer assim.

Para Android

Abra launch_background.xml e, em seguida, você pode inserir a imagem da tela inicial ou a cor gradiente desejada. Essa é a primeira coisa que seu usuário vê quando abre seu aplicativo. insira a descrição da imagem aqui

Para IOS

Abra seu aplicativo usando o Xcode, clique em Runner> Assest.xcassets> LaunchImage, você pode adicionar a imagem aqui. Se você deseja editar qual posição a imagem da tela de inicialização deve assumir ou parecer, é possível editá-la no LaunchScreen.storyboard.

insira a descrição da imagem aqui

Abel Tilahun
fonte
3

Aqui estão as etapas para configurar a tela inicial nas plataformas IOS e Android para seu aplicativo Flutter.

Plataforma IOS

Todos os aplicativos enviados à Apple App Store devem usar um storyboard do Xcode para fornecer a tela de inicialização do aplicativo. Vamos fazer isso em 3 etapas: -

Etapa 1 : abra o ios / Runner.xcworkspace na raiz do diretório do seu aplicativo.

Etapa 2 : Selecione Runner / Assets.xcassets no Project Navigator e arraste as imagens de inicialização de todos os tamanhos (2x, 3x, etc.). Você também pode gerar tamanhos diferentes de imagens em https://appicon.co/#image-sets

insira a descrição da imagem aqui

Etapa 3 : você pode ver o arquivo LaunchScreen.storyboard mostrando a imagem fornecida. Aqui também é possível alterar a posição da imagem, arrastando-a. Para obter mais informações, consulte a documentação oficial https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/

insira a descrição da imagem aqui

Plataforma Android

No Android, uma tela de inicialização é exibida enquanto o aplicativo Android é inicializado. Vamos definir esta tela de inicialização em 3 etapas: -

Etapa 1 : Abra o arquivo android / app / src / main / res / drawable / launch_background.xml.

Etapa 2 : na linha número 4, você pode selecionar a cor desejada: -

<item android:drawable="@android:color/white" />

Etapa 3 : na linha número 10, você pode alterar a imagem: -

android:src="@mipmap/launch_image"

insira a descrição da imagem aqui

Isso é tudo, você está pronto! Happy Coding :)

Gagandeep Gambhir
fonte
0

Para o
aplicativo Android -> src -> principal -> res -> drawble-> launch_background.xml e descomente o bloco comentado como este

<item>
  <bitmap
      android:gravity="center"
      android:src="@mipmap/launch_image" /></item>

existe alguém enfrentando algum erro depois de codificar como este?
Use a sincronização com o sistema no android studio ou invalide o cache e redefina.

lava
fonte
0

O Flutter.dev já fornece a melhor resposta, isso não é um bug nem um problema, apenas uma configuração. Basta ler um pouco e tudo será resolvido. Tenham um bom dia, pessoal.

https://flutter.dev/docs/development/ui/advanced/splash-screen

Fabrício Justo
fonte
Isso não parece mais relevante, pois a mesma resposta já foi dada em 9 de abril.
Keimeno 21/06
Mas o meu é muito mais direto ao ponto da melhor fonte.
Fabrício Justo
0

Você pode criá-lo de duas maneiras

  1. Vá para o pacote nativo e uma página inicial. como no pacote Android nativo criar um drawable
  2. Crie uma tela de dardo para exibir por algum tempo

Encontrei uma explicação completa para remover a tela branca e exibir a tela inicial aqui

Sunil
fonte
-1
SplashScreen(
          seconds: 3,
          navigateAfterSeconds: new MyApp(),
          // title: new Text(
          //   'Welcome In SplashScreen',
          //   style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
          // ),
          image: new Image.network('https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Tesla_Motors.svg/1200px-Tesla_Motors.svg.png'),
          backgroundColor: Colors.white,
          styleTextUnderTheLoader: new TextStyle(),
          photoSize: 150.0,
          loaderColor: Colors.black),
    ),
  );
MJ
fonte