Вставка изображения в приложение Flutter контейнера - PullRequest
0 голосов
/ 06 сентября 2018

Я смотрю на этот шаблон, который я нашел на startflutter.com, и полный код можно увидеть ниже

Я пытаюсь вставить свое собственное изображение в круг, и кажется, что нет способа уместить изображение, чтобы оно полностью поместилось в рамку (оно всегда обрезается)

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

Я бы хотел вставить изображение в контейнер, вот так

     @override
  Widget build(BuildContext context) {
    final alucard = Container(
        decoration: new BoxDecoration(
          image: new DecorationImage(
              image: new AssetImage("images/logo.png"),
              fit: BoxFit.fill,
          )
        )
    );

Но это не работает и не появится, что с этим не так?

Вот вся страница кода ...

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

Ответы [ 4 ]

0 голосов
/ 02 мая 2019

Может добавить изображение в контейнер как- [your_image_folder_path / image_name]

Container(
    child:  Image(image: AssetImage("images/logo.png")))
0 голосов
/ 07 сентября 2018

Измените свой контейнер с этим будет нормально работать

new Container(
      height: 120.0,
      width: 120.0,
      decoration: new BoxDecoration(
        image: DecorationImage(
          image: new AssetImage(
              'assets/assets/alucard.jpg'),
          fit: BoxFit.fill,
        ),
        shape: BoxShape.circle,
      ),
    )
0 голосов
/ 07 сентября 2018

Попробуйте это

new Container(
  width: 100.00,
  height: 100.00,
  decoration: new BoxDecoration(
  image: new DecorationImage(
      image: ExactAssetImage('assets/example.png'),
      fit: BoxFit.fitHeight,
      ),
  ));

Убедитесь, что вы указали flutter, где находится ваша папка ресурсов, отредактировав файл pubspec.yaml https://docs.flutter.io/flutter/painting/ExactAssetImage-class.html

0 голосов
/ 07 сентября 2018

Передача BoxFit.fill на ваш Image.asset должна сделать.

Попробуйте это;

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: new Container(
          height: 80.0,
          width: 80.0,
          decoration: new BoxDecoration(
            image: DecorationImage(
              image: new AssetImage(
                  'assets/alucard.jpg'),
              fit: BoxFit.fill,
            ),
            borderRadius:
            BorderRadius.circular(80.0),
          ),
        ),
      ),
    );

    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,
    );
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...