How to align circleAvatar over a background image

Question 1

Here is my code.. Here I want CircleAvatar over that background image.

     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,
      );
   }
 }

And one more thing how to give gradient to appBar. Thanks in advance.!

Question 2

Try

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'),
                ),
            ),
),

instead of

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

And for gredient app bar you can use https://pub.dev/packages/new_gradient_app_bar

Question 3

Appbar widget doesn't have gradient option yet but you can add it like this:

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

You didn't use the stack as you need. you need to build stack under column with using 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

Try

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'),
                ),
            ),
),

instead of

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

And for gredient app bar you can use https://pub.dev/packages/new_gradient_app_bar

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

Appbar widget doesn't have gradient option yet but you can add it like this:

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

You didn't use the stack as you need. you need to build stack under column with using 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')
          ],
        ),
      )

How to align circleAvatar over a background image

In other languages

This page is in other languages

Popular in the category