У меня есть 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](https://i.stack.imgur.com/Ge1ng.png)
PS:для краткости изображения размыты.
Чего я хочу добиться, так это:
![enter image description here](https://i.stack.imgur.com/6NW8a.png)
Но я не уверен, как этого добиться.