Jak sladit circleAvatar přes obrázek na pozadí

0

Otázka

Tady je můj kód.. Tady chci CircleAvatar přes obrázek na pozadí.

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

A ještě jedna věc jak se dá gradient na panelu aplikací. Díky předem.!

dart flutter
2021-11-24 06:02:58
3

Nejlepší odpověď

3

Zkuste

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

místo

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

A pro gredient app bar můžete použít https://pub.dev/packages/new_gradient_app_bar

2021-11-24 06:22:36
1

Panel aplikace widget nemá spád možnost, ale zatím se můžete přidat, jako je tento:

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
        ])          
     ),        
 ),      
)
2021-11-24 06:13:39
1

Nepoužil jsi zásobníku, jak budete potřebovat. budete muset vybudovat stack ve sloupci s pomocí 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')
          ],
        ),
      )

enter image description here

2021-11-24 06:34:21

V jiných jazycích

Tato stránka je v jiných jazycích

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................