Cómo agregar una barra de progreso de porcentaje a la pantalla de inicio predeterminada / fondo de inicio de Flutter | Autor: Dibyendu Paul | Julio de 2021
En la mayoría de los sitios web, se recomienda agregar una pantalla de bienvenida, necesitamos agregar una Widget de pantalla de bienvenida adentro Widget de MaterialApp En el archivo main.dart. Pero, ¿puede esto resolver tu propósito?estoy hablando de Pantalla de bienvenida predeterminada En el aleteo.No, no resolvió el propósito cuando queríamos agregar uno Pantalla de bienvenida predeterminada En aleteo.
Déjame hablar con más detalles. Flutter proporciona un widget SplashScreen que puede agregar a MaterialApp.
Pero espera a que dØes no cumple con el propósito real. Antes de que apareciera la pantalla de bienvenida, todavía veía una pantalla de fondo blanco. Bueno, también puedes solucionar este problema.En Flutter, puedes launch_background.xml
se puede ir android → aplicación → src → principal → res → dibujable Allí puede agregar cualquier imagen y realizar la configuración XML para deshacerse de la pantalla de presentación blanca / negra predeterminada en Flutter. Es como usar el logo de Flutter en este caso. Puede utilizar el siguiente código para lograr la configuración anterior.
Parece casi cumplir con nuestro propósito, pero en este caso, solo vemos un logotipo de Flutter estático. Entonces, ¿qué debemos hacer cuando queremos agregar una pantalla de presentación personalizada con una barra de progreso?
En este caso, podemos observar que una vez abierta la aplicación, mostrará una barra de progreso lineal y un porcentaje de progreso. ¿Cómo hago esto? Bueno, déjame decirte que Flutter no proporciona ninguna característica para implementarlo. ¿Qué tengo que hacer?
Déjame explicarlo. La aplicación Flutter comienza desde el archivo main.dart. Entonces, antes de ejecutar el archivo main.dart, Flutter no puede controlar nada que suceda. La pantalla de presentación predeterminada se ejecuta antes del archivo main.dart. Entonces no podemos cambiarlo en Flutter, pero podemos diseñarlo en la plataforma de aplicación nativa. En este tutorial, demostraré cómo crear una pantalla de presentación personalizada como se muestra arriba.
Abra su proyecto de flutter en Android Studio y luego haga clic derecho en el directorio de Android y luego haga clic en Flutter y luego haga clic en el módulo de Android abierto en Android Studio. Haga clic con el botón derecho en Android → haga clic en Flutter → haga clic en Abrir módulo de Android en el estudio de Android.
Haga clic con el botón derecho en el directorio java, luego haga clic en Nuevo, luego en Actividad y finalmente en Vaciar actividad.Crea un evento vacío llamado Pantalla de bienvenida.
Verás un archivo java Pantalla de bienvenida.java El paquete y un archivo XML en el directorio java activity_splash_screen.xml Se creará en el directorio de diseño.
Luego, puede diseñar la pantalla de presentación en el archivo activity_splash_screen.xml. Allí puede agregar una barra de progreso lineal y un widget Textview que muestra el porcentaje de progreso.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SplashScreen"><ImageView
android:id="@+id/imglogo"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_centerInParent="true"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.501"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.499" />
<TextView
android:id="@+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/imglogo"
android:layout_marginTop="28dp"
android:gravity="center_horizontal"
android:text="Flutter Demo App"
android:textColor="@android:color/black"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imglogo"
tools:ignore="MissingConstraints" />
<ProgressBar
android:id="@+id/progressBarId"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:progressBackgroundTint="#B5B5B5"
android:progressTint="#E91E63"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/text1" />
<TextView
android:id="@+id/textViewId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="TextView"
android:textSize="30sp"
android:textColor="@android:color/holo_blue_dark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/progressBarId"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
Puede escribir código para animar la barra de progreso y cambiar el porcentaje de texto a lo largo del tiempo a través del método findViewById () en Java.
import androidx.appcompat.app.AppCompatActivity;import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.widget.ProgressBar;
import android.widget.TextView;
public class SplashScreen extends AppCompatActivity {
ProgressBar progressBar;
TextView textView;
int value;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_splash_screen);
progressBar = findViewById(R.id.progressBarId);
textView = findViewById(R.id.textViewId);
Thread thread = new Thread(new Runnable()
@Override
public void run()
for (value = 0; value<=100; value++)
try
Thread.sleep(30);
progressBar.setProgress(value);
setText(textView, String.valueOf(value)+"%" );
catch (InterruptedException e)
e.printStackTrace();
);
thread.start();
int secondsDelayed = 3;
new Handler().postDelayed(new Runnable()
public void run()
startActivity(new Intent(SplashScreen.this, MainActivity.class));
finish();
, secondsDelayed * 1000);
}
private void setText(final TextView text,final String value)
runOnUiThread(new Runnable()
@Override
public void run()
text.setText(value);
);
}
Finalmente, puede cambiar la configuración de AndroidManifest.xml para que la actividad de SplashScreen ocurra primero.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.untitled"><application
android:hardwareAccelerated="true"
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="untitled"
android:supportsRtl="true"
android:theme="@style/LaunchTheme">
<activity
android:name=".SplashScreen"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:launchMode="singleTop"
android:theme="@style/Theme.AppCompat.Light.NoActionBar"
android:windowSoftInputMode="adjustResize"><intent-filter>
<action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".MainActivity" />
<meta-data
android:name="flutterEmbedding"
android:value="2" />
</application></manifest>
Esto funcionará y logrará su propósito. gracias por su paciencia.
