Cómo alinear circleAvatar sobre una imagen de fondo

Question 1

Aquí está mi código.. Aquí quiero CircleAvatar más que la imagen de fondo.

     body: SingleChildScrollView(
      child: Stack(
      children: [
        Column(
          children: [
            CircleAvatar(
              backgroundImage: AssetImage('images/images.jpg'),
            ),
            Image(
              image: AssetImage('images/flutter.jpg'),
            ),
            label('First Name'),
            label('Second name'),
            label('Email-id'),
            label('Passowrd'),
            label('Confirm passowrd'),
               ],
               ),
             ],
            ),
          ),
        backgroundColor: Colors.white,
      );
   }
 }

Y una cosa más ¿cómo dar gradiente de appBar. Gracias de antemano.!

Question 2

Trate de

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage('images/flutter.jpg'),
            fit: BoxFit.cover,
            ),
        ),
        child: Padding(
             padding: const EdgeInsets.all(8.0),
             child: CircleAvatar(
                backgroundImage: AssetImage('images/images.jpg'),
                ),
            ),
),

en lugar de

CircleAvatar(
    backgroundImage: AssetImage('images/images.jpg'),
),
Image(
    image: AssetImage('images/flutter.jpg'),
    ),

Y para gredient barra de la aplicación puede utilizar https://pub.dev/packages/new_gradient_app_bar

Question 3

Appbar widget no tiene la opción gradiente todavía, pero puedes añadirlo como este:

appBar: AppBar(
  centerTitle: true,
    title: Text('title'),
    flexibleSpace: Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: <Color>[
          Colors.red,
          Colors.blue
        ])          
     ),        
 ),      
)

Question 4

Usted no usa la pila como usted necesita. usted necesita para construir la pila, en la columna con el uso de position

SingleChildScrollView(
        child: Column(
          children: [
            Stack(
              children: [
                SizedBox(
                  height: 200,
                  width: double.infinity,
                  child: Image(
                    image: AssetImage('images/profile.png'),
                  ),
                ),
                Positioned(
                  bottom: 0,
                  left: MediaQuery.of(context).size.width / 2 - 20,
                  child: CircleAvatar(
                    backgroundImage: AssetImage('images/profile.png'),
                  ),
                ),
              ],
            ),
            Text('First Name'),
            Text('Second name'),
            Text('Email-id'),
            Text('Passowrd'),
            Text('Confirm passowrd')
          ],
        ),
      )

Hüseyin Gözübenli · Answer 1 · 2021-11-24T06:22:36

Trate de

Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage('images/flutter.jpg'),
            fit: BoxFit.cover,
            ),
        ),
        child: Padding(
             padding: const EdgeInsets.all(8.0),
             child: CircleAvatar(
                backgroundImage: AssetImage('images/images.jpg'),
                ),
            ),
),

en lugar de

CircleAvatar(
    backgroundImage: AssetImage('images/images.jpg'),
),
Image(
    image: AssetImage('images/flutter.jpg'),
    ),

Y para gredient barra de la aplicación puede utilizar https://pub.dev/packages/new_gradient_app_bar

Rohith Nambiar · Answer 2 · 2021-11-24T06:13:39

Appbar widget no tiene la opción gradiente todavía, pero puedes añadirlo como este:

appBar: AppBar(
  centerTitle: true,
    title: Text('title'),
    flexibleSpace: Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: <Color>[
          Colors.red,
          Colors.blue
        ])          
     ),        
 ),      
)

Jahidul Islam · Answer 3 · 2021-11-24T06:34:21

Usted no usa la pila como usted necesita. usted necesita para construir la pila, en la columna con el uso de position

SingleChildScrollView(
        child: Column(
          children: [
            Stack(
              children: [
                SizedBox(
                  height: 200,
                  width: double.infinity,
                  child: Image(
                    image: AssetImage('images/profile.png'),
                  ),
                ),
                Positioned(
                  bottom: 0,
                  left: MediaQuery.of(context).size.width / 2 - 20,
                  child: CircleAvatar(
                    backgroundImage: AssetImage('images/profile.png'),
                  ),
                ),
              ],
            ),
            Text('First Name'),
            Text('Second name'),
            Text('Email-id'),
            Text('Passowrd'),
            Text('Confirm passowrd')
          ],
        ),
      )

Cómo alinear circleAvatar sobre una imagen de fondo

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría