Faça um aplicativo Mars Weather em Flutter usando NASA API
Tempo de leitura: 3 minutes
Neste tutorial, vou mostrar a você como construir um ótimo aplicativo Mars Weather usando o Flutter e a API NASA. é um projeto muito legal que vai fazer você entender alguns conceitos avançados de programação, como uma requisição HTTP, API, programação assíncrona. sem mais delongas, vamos começar a construir o projeto
Configure o projeto
Primeiro você precisará criar um novo diretório chamado ‘Assets’ e adicionar esta imagem dentro dele
não se esqueça de adicionar o diretório dentro do arquivo pubspec.yaml e adicionar o pacote HTTP também
apenas copie e cole este código dentro das dependências
dependencies: flutter: sdk: flutter http: ^0.12.0
agora vamos construir o aplicativo
Código fonte:
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; import 'dart:async'; import 'dart:convert'; void main() => runApp(MaterialApp( debugShowCheckedModeBanner: false, home: NasaApp(), )); class NasaApp extends StatefulWidget { @override _NasaAppState createState() => _NasaAppState(); } class _NasaAppState extends State<NasaApp> { // Agora vamos criar rapidamente o widget de item de lista // isso tornará mais fácil implementar ou modificar // para os parâmetros // Sol é o número do dia em marte // min é para a temperatura mais baixa // max é para o mais alto // nosso item de lista é semelhante ao cabeçalho, então vamos apenas copiá-lo Widget ListItem(String Sol, int min, int max){ return Column( children: <Widget>[ SizedBox(height:10.0), Row( children: <Widget>[ Expanded( child: Text( "Sol $Sol", style: TextStyle( color: Colors.white, fontSize: 24.0, fontWeight: FontWeight.bold, ), ), ), SizedBox(width: 120,), Expanded( child: Text( "High: $max°C", textAlign: TextAlign.start, style: TextStyle( color: Colors.white, fontSize: 20.0, fontWeight: FontWeight.w400, ), ), ), ], ), SizedBox(height: 10.0,), Row( children: <Widget>[ Expanded( child: Text( "", style: TextStyle( color: Colors.white, fontSize: 8.0, fontWeight: FontWeight.bold, ), ), ), SizedBox(width: 120,), Expanded( child: Text( "Low: $min°C", textAlign: TextAlign.start, style: TextStyle( color: Colors.white, fontSize: 20.0, fontWeight: FontWeight.w400, ), ), ), ], ), SizedBox(height: 10.0,), Container( height: 2.0, width: double.infinity, color: Colors.white, ) ], ); } // Agora vamos criar a solicitação HTTP para obter nossos dados // primeiro vamos importar alguns pacotes // Agora precisaremos obter o URL da API // você pode encontrá-lo no site da API da NASA ou pode encontrar o link abaixo na descrição // se você tiver uma conta, pode substituir o DEMO_kEY pela sua própria chave para obter mais solicitações String Url = "https://api.nasa.gov/insight_weather/?api_key=DEMO_KEY&feedtype=json&ver=1.0"; var Sol_key; var Data; List weather_data = []; //agora vamos criar a função para a solicitação HTTP Future<String> getData() async{ http.Response response = await http.get( Uri.encodeFull(Url), headers: { "Accept" : "application/json" } ); setState(() { Data = json.decode(response.body); print(Data); Sol_key = Data["sol_keys"]; // certifique-se de ler a documentação completa: p Sol_key = Sol_key.reversed.toList(); for(int i = 0; i< Sol_key.length; i++){ weather_data.add(Data[Sol_key[i]]["AT"]); // this will allow us to get only the weather data } print(weather_data); }); //Ok, agora que terminamos com nossa solicitação http, vamos implementar os dados em nossa IU } //vamos chamar nossa função @override void initState() { // TODO: implement initState this.getData(); } @override Widget build(BuildContext context) { return Scaffold( body: Container( //primeiro vamos adicionar a imagem de fundo ao nosso projeto width: double.infinity, decoration: BoxDecoration( image: DecorationImage( image: AssetImage("Assets/bg.png"), fit: BoxFit.cover, alignment: Alignment.center, //now let's add a black color filter to make the text more visible colorFilter: ColorFilter.mode(Colors.black54, BlendMode.darken), ), ), child: Padding( padding: EdgeInsets.only(top: 50, bottom: 15, left: 15,right: 15), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( "Latest Weather\nat Elysium Planitia", style: TextStyle( color: Colors.white, fontWeight: FontWeight.w800, fontSize: 28.0 ), ), SizedBox(height: 30.0,), //Agora vamos criar o contêiner de dados Row( children: <Widget>[ Expanded( child: Text( "Sol ${Sol_key[0]}", style: TextStyle( color: Colors.white, fontSize: 38.0, fontWeight: FontWeight.bold, ), ), ), Expanded( child: Text( "High: ${(weather_data[0]["mx"]).ceil()}°C", style: TextStyle( color: Colors.white, fontSize: 34.0, fontWeight: FontWeight.w300, ), ), ), ], ), SizedBox(height: 10.0,), Row( children: <Widget>[ Expanded( child: Text( "Today ", style: TextStyle( color: Colors.white, fontSize: 38.0, fontWeight: FontWeight.bold, ), ), ), Expanded( child: Text( "Low: ${(weather_data[0]["mn"]).ceil()}°C", style: TextStyle( color: Colors.white, fontSize: 34.0, fontWeight: FontWeight.w300, ), ), ), ], ), //Agora vamos criar a lista para os dados dos dias anteriores SizedBox(height: 60.0,), Text( "Previous Days", style: TextStyle( color: Colors.white, fontWeight: FontWeight.w800, fontSize: 28.0, ), ), SizedBox(height: 10.0,), Container( height: 3.0, width: double.infinity, color: Colors.white, ), Expanded( child: ListView.builder( itemCount: Sol_key.length, itemBuilder: (BuildContext, int index){ return ListItem(Sol_key[index], (weather_data[index]["mn"]).ceil(), (weather_data[index]["mx"]).ceil()); } ), ) ], ), ), ), ); } }