How to use drawable (or equivalent) as background in an flutter widget

Viewed 236

I'm an Android developer and I start studying Flutter. To better understand this framework, I'm trying to convert an existing application. I'm trying to convert the following fragment:

enter image description here

<?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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/home_background"
    android:paddingLeft="@dimen/fragment_horizontal_margin"
    android:paddingTop="@dimen/fragment_vertical_margin"
    android:paddingRight="@dimen/fragment_horizontal_margin"
    android:paddingBottom="@dimen/fragment_vertical_margin"
    tools:context=".ui.login.LoginFragment">

    <EditText
        android:id="@+id/fragment_login_username"
        style="@android:style/Widget.AutoCompleteTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="24dp"
        android:background="@color/white"
        android:hint="@string/prompt_username"
        android:inputType="text"
        android:padding="4dp"
        android:selectAllOnFocus="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/baseUrl" />

    <EditText
        android:id="@+id/fragment_login_password"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="24dp"
        android:background="@color/white"
        android:hint="@string/prompt_password"
        android:imeActionLabel="@string/action_sign_in_short"
        android:imeOptions="actionDone"
        android:inputType="textPassword"
        android:padding="4dp"
        android:selectAllOnFocus="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/fragment_login_username" />

    <Button
        android:id="@+id/fragment_login_login"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        android:layout_marginStart="48dp"
        android:layout_marginEnd="48dp"
        android:layout_marginBottom="64dp"
        android:enabled="false"
        android:text="@string/action_sign_in"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <ProgressBar
        android:id="@+id/fragment_login_loading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="64dp"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:visibility="visible" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="128dp"
        android:layout_height="128dp"
        android:layout_marginTop="48dp"
        android:src="@drawable/ic_lock_outline_primary_24dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:tint="@color/white" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/login_button"
        android:textAppearance="@style/TextAppearance.AppCompat.Display3"
        android:textColor="@color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView4" />

    <TextView
        android:id="@+id/baseUrl"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="http://localhost"
        android:textColor="@color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <ImageView
        android:id="@+id/login_refresh_backend_url"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:src="@drawable/ic_refresh_24dp"
        app:layout_constraintBottom_toBottomOf="@+id/baseUrl"
        app:layout_constraintStart_toEndOf="@+id/baseUrl"
        app:layout_constraintTop_toBottomOf="@+id/textView2"
        app:tint="@color/white" />

</androidx.constraintlayout.widget.ConstraintLayout>

As you can see, the ConstraintLayout uses a vector image as background.

enter image description here

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="100dp"
    android:height="100dp"
    android:viewportHeight="700"
    android:viewportWidth="700">
    <path
        android:pathData="M0,0L700,0L700,400Q350,550,0,400"
        android:strokeColor="@color/primary_color"
        android:strokeWidth="1"
        android:fillColor="@color/primary_color"/>
</vector>

In Flutter's implementation of my application, I would like to continue to use vector graphics because it's scalable.

Is there a way to use vector graphics as background in Flutter widgets?

Is there a way to automatically convert an existing XML layout into a flutter widget tree?

Thank you in advance.

1 Answers

You should go with Flutter Inspector dev tools. Which one helps to visualize the widget tree as like as XML vector Graphics.

How you can access flutter inspector from android studio?

View > Tool Window > Flutter Inspector; otherwise, check out your right panel

For more, you can read this article

Related