0

estoy aprendiendo flutter y queria saber como hago mostrar un cargando antes de que arranque mi aplicación. Un estilo por ejemplo la de MCDonalds, cuando abris la app te aparece un gif supongo que hace la M y después arranca la aplicación. Esto es posible en flutter?. Alguien tiene un ejemplo o que me de una idea de donde arrancarlo. Les paso mi main.dart debería aparecer la imagen antes de que cargue el main entiendo.

void main() => runApp(MyApp(post: getToken()));

class MyApp extends StatelessWidget {

  final Future<String> post;
  MyApp({Key key, this.post}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'App' + "'" + "s",
        debugShowCheckedModeBanner: false,
        home: new HomePage());
  }
}

Future<String> getToken() async {

  var token;

  final response = await http.post("****",
    headers: <String, String>{
      'Content-Type': 'application/json',
    },
    body: jsonEncode(<String, String>{
      'database': "*****",
      'user': "****",
      'password': "****",
    }),
    );

    print(response.statusCode);
        print(json.decode(response.body));

  if (response.statusCode == 200) {
    return token;
  } else {
    throw Exception('Failed to login');
  }
}

1 respuesta 1

-2

Para eso puedes iniciar tu widget, cargar el token, una vez que cargó el token haces un pushReplacement de tu widget Home pasándole el token.

Te preparé un ejemplo sencillo simulando un delay de 3 segundos para obtener el token, reemplazo eso por tu llamada http.

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final Future<String> post;
  MyApp({Key key, this.post}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'App' + "'" + "s",
        debugShowCheckedModeBanner: false,
        home: LoadingScreen());
  }
}

class LoadingScreen extends StatefulWidget {
  @override
  _LoadingScreenState createState() => _LoadingScreenState();
}

class _LoadingScreenState extends State<LoadingScreen> {
  @override
  void initState() {
    getToken().then((val) {
      Navigator.of(context)
          .pushReplacement(MaterialPageRoute(builder: (_) => Home(token: val)));
    });
    super.initState();
  }

  Future<String> getToken() async {
    await Future.delayed(const Duration(seconds: 3));
    return "123";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.red,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                'Loading Screen...',
                textAlign: TextAlign.center,
              ),
              CircularProgressIndicator()
            ],
          ),
        ),
      ),
    );
  }
}

class Home extends StatelessWidget {
  final String token;

  const Home({Key key, this.token}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: Text(token),
        ),
      ),
    );
  }
}

OJO: Esto es un splash screen en Dart, pero antes que inicie la aplicación, notarás una pantalla blanca que es la carga de los componentes de flutter en la app nativa. Si quieres modificar esa pantalla, te recomiendo que leas un post que escribí. https://medium.com/@diegoveloper/flutter-splash-screen-9f4e05542548

Quizás no lo necesites , pero ahí lo puse de todas formas.

1
  • Sería genial que al marcar como negativa la respuesta, den sus comentarios para poder mejorar :) Commented el 20 mar. 2020 a las 23:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.