Jak wyrównać circleAvatar dla obrazu tła

Question 1

Oto mój kod.. Tutaj chcę zakreślić kółkiem to obraz tła.

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

I jeszcze jedna rzecz, jak nadać gradient pasku aplikacji. Z góry dziękuję.!

Question 2

Spróbuj

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

zamiast

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

A na pasku aplikacji gredient można użyć https://pub.dev/packages/new_gradient_app_bar

Question 3

Widget na pasku aplikacji jeszcze nie ma opcji gradientu, ale można go dodać w następujący sposób:

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

Nie używali stos tak, jak trzeba. trzeba zbudować stos pod kolumną z wykorzystaniem 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

Spróbuj

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

zamiast

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

A na pasku aplikacji gredient można użyć https://pub.dev/packages/new_gradient_app_bar

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

Widget na pasku aplikacji jeszcze nie ma opcji gradientu, ale można go dodać w następujący sposób:

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

Nie używali stos tak, jak trzeba. trzeba zbudować stos pod kolumną z wykorzystaniem 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')
          ],
        ),
      )

Jak wyrównać circleAvatar dla obrazu tła

Pytanie

Najlepsza odpowiedź

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii