I am looking at this template i found on startflutter.com and the full code can be seen below
i try to insert my own image into the circle and it seems there isn't a way to fit the image to fully go into the box (it's always cropped)
@override Widget build(BuildContext context) { final alucard = Hero( tag: 'hero', child: Padding( padding: EdgeInsets.all(16.0), child: CircleAvatar( radius: 72.0, backgroundColor: Colors.transparent, backgroundImage: AssetImage('assets/alucard.jpg'), ), ), );
I would like to insert an image in a container, like so
@override Widget build(BuildContext context) { final alucard = Container( decoration: new BoxDecoration( image: new DecorationImage( image: new AssetImage("images/logo.png"), fit: BoxFit.fill, ) ) );
But this doesn't work and wont show up, what is wrong with this?
Here is the whole page of code...
import 'package:flutter/material.dart'; class HomePage extends StatelessWidget { static String tag = 'home-page'; @override Widget build(BuildContext context) { final alucard = Hero( tag: 'hero', child: Padding( padding: EdgeInsets.all(16.0), child: CircleAvatar( radius: 72.0, backgroundColor: Colors.transparent, backgroundImage: AssetImage('assets/alucard.jpg'), ), ), ); final welcome = Padding( padding: EdgeInsets.all(8.0), child: Text( 'Welcome Alucard', style: TextStyle(fontSize: 28.0, color: Colors.white), ), ); final lorem = Padding( padding: EdgeInsets.all(8.0), child: Text( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit condimentum mauris id ', style: TextStyle(fontSize: 16.0, color: Colors.white), ), ); final body = Container( width: MediaQuery.of(context).size.width, padding: EdgeInsets.all(28.0), decoration: BoxDecoration( gradient: LinearGradient(colors: [ Colors.blue, Colors.lightBlueAccent, ]), ), child: Column( children: <Widget>[alucard, welcome, lorem], ), ); return Scaffold( body: body, ); } }
Change your container with this will work fine
Container( height: 120.0, width: 120.0, decoration: BoxDecoration( image: DecorationImage( image: AssetImage( 'assets/assets/alucard.jpg'), fit: BoxFit.fill, ), shape: BoxShape.circle, ), )
Try this
new Container( width: 100.00, height: 100.00, decoration: new BoxDecoration( image: new DecorationImage( image: ExactAssetImage('assets/example.png'), fit: BoxFit.fitHeight, ), ));
Make sure you tell flutter where your assets folder is by editing the pubspec.yaml file https://docs.flutter.io/flutter/painting/ExactAssetImage-class.html
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With