在Flutter中将图像合并在一起

时间:2018-09-28 16:29:04

标签: flutter flutter-layout flutter-animation

我有3张图像,并且想要将它们组合并制作/显示完整的图像,就像我们使用不同的零件来构建拼图一样。到目前为止,下面是我的代码:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: new demoScreen(),
    );
  }
}

class demoScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: AppBar(
        title: new Text('Demo'),
      ),
      body: new imageDisplay(),
    );
  }
}

class imageDisplay extends StatelessWidget {

  final topImage = new Container(
    child: new Row(
      children: <Widget>[
        new Image.asset('images/top.png'),
      ],
    ),

  );

  final leftImage = new Container(
    margin: new EdgeInsets.symmetric(horizontal: 5.0),
    child: new Row(
      children: <Widget>[
        new Image.asset('images/left.png',
        ),
      ],
    )
  );

  final rightImage = new Container(
    child: new Row(
      children: <Widget>[
        new Image.asset('images/right.png'),
      ],
    )
  );
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      body:
        new Container(
          padding: new EdgeInsets.all(14.0),
          height: 150.0,
          child: new Row(
            children: <Widget>[
              topImage,
              leftImage,
              rightImage
            ],
          ),
        )
    );
  }
}

使用上面的代码,我能够实现这一目标:

enter image description here

P.S:为简洁而模糊的图像。

我想实现的是这样:

enter image description here

但是我不确定如何实现。

0 个答案:

没有答案