Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Inserting image into a container Flutter app

Tags:

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,     );   } } 
like image 375
Mfreeman Avatar asked Sep 06 '18 19:09

Mfreeman


2 Answers

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,       ),     ) 
like image 155
Zulfiqar Avatar answered Sep 20 '22 19:09

Zulfiqar


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

like image 44
F-1 Avatar answered Sep 22 '22 19:09

F-1