Я пытаюсь сделать что-то вроде этого, изображения с одинаковыми параметрами, но с разной высотой. По два изображения с каждой стороны
Но получил:
Я не знаю, что еще попробовать. Я думаю, что лучший способ — использовать Wrap
. Но у меня есть дополнительное пространство между изображениями.
Код:
class ImageFeed extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Wrap(
spacing: 10,
runSpacing: 10,
children: [
ImageFeedDesign(
image: 'assets/bali.png',
),
ImageFeedDesign(
image: 'assets/bali.png',
),
ImageFeedDesign(
image: 'assets/bali.png',
),
ImageFeedDesign(
image: 'assets/bali.png',
),
],
);
}
}
Дизайн изображения кода.
class ImageFeedDesign extends StatelessWidget {
ImageFeedDesign({this.image});
final String image;
final String place = 'Bali';
final String distance = '2.834 km';
@override
Widget build(BuildContext context) {
return Stack(
children: [
Container(
width: MediaQuery.of(context).size.width / 2 - 30,
height: _getHeight(),
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: AssetImage(image),
),
borderRadius: BorderRadius.all(Radius.circular(15.0)),
),
),
Positioned(
bottom: 10,
left: 15,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
place,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: kWhite,
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
const SizedBox(height: 2.0),
Text(
distance,
style: TextStyle(color: kWhite),
),
],
),
),
Positioned(
bottom: 10,
right: 15,
child: FaIcon(
FontAwesomeIcons.instagram,
color: kWhite,
),
),
],
);
}
double _getHeight() {
double defaultValue = 170.0;
Random random = Random();
return defaultValue + random.nextInt(56);
}
}
Вы можете скопировать и вставить полный код ниже
Потому что у ImageFeedDesign
есть случайные height
В этом случае вы можете использовать StaggeredGridView.count
и StaggeredTile.fit(2)
Для демонстрационных целей я меняю AssetImage
на NetworkImage
фрагмент кода
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
...
StaggeredGridView.count(
primary: false,
crossAxisCount: 4,
mainAxisSpacing: 15.0,
crossAxisSpacing: 0.0,
children: <Widget>[
ImageFeedDesign(image: 'https://picsum.photos/250?image=9'),
ImageFeedDesign(image: 'https://picsum.photos/250?image=10'),
ImageFeedDesign(image: 'https://picsum.photos/250?image=11'),
ImageFeedDesign(image: 'https://picsum.photos/250?image=12'),
ImageFeedDesign(image: 'https://picsum.photos/250?image=13'),
ImageFeedDesign(image: 'https://picsum.photos/250?image=14'),
ImageFeedDesign(image: 'https://picsum.photos/250?image=15'),
ImageFeedDesign(image: 'https://picsum.photos/250?image=16'),
],
staggeredTiles: const <StaggeredTile>[
const StaggeredTile.fit(2),
const StaggeredTile.fit(2),
const StaggeredTile.fit(2),
const StaggeredTile.fit(2),
const StaggeredTile.fit(2),
const StaggeredTile.fit(2),
const StaggeredTile.fit(2),
const StaggeredTile.fit(2),
],
)
рабочая демонстрация
полный код
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: StaggeredGridView.count(
primary: false,
crossAxisCount: 4,
mainAxisSpacing: 15.0,
crossAxisSpacing: 0.0,
children: <Widget>[
ImageFeedDesign(image: 'https://picsum.photos/250?image=9'),
ImageFeedDesign(image: 'https://picsum.photos/250?image=10'),
ImageFeedDesign(image: 'https://picsum.photos/250?image=11'),
ImageFeedDesign(image: 'https://picsum.photos/250?image=12'),
ImageFeedDesign(image: 'https://picsum.photos/250?image=13'),
ImageFeedDesign(image: 'https://picsum.photos/250?image=14'),
ImageFeedDesign(image: 'https://picsum.photos/250?image=15'),
ImageFeedDesign(image: 'https://picsum.photos/250?image=16'),
],
staggeredTiles: const <StaggeredTile>[
const StaggeredTile.fit(2),
const StaggeredTile.fit(2),
const StaggeredTile.fit(2),
const StaggeredTile.fit(2),
const StaggeredTile.fit(2),
const StaggeredTile.fit(2),
const StaggeredTile.fit(2),
const StaggeredTile.fit(2),
],
),
);
}
}
class ImageFeedDesign extends StatelessWidget {
ImageFeedDesign({this.image});
final String image;
final String place = 'Bali';
final String distance = '2.834 km';
Color kWhite = Colors.white;
@override
Widget build(BuildContext context) {
return Stack(
children: [
Container(
width: MediaQuery.of(context).size.width / 2 - 15,
height: _getHeight(),
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(image),
),
borderRadius: BorderRadius.all(Radius.circular(15.0)),
),
),
Positioned(
bottom: 10,
left: 15,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
place,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: kWhite,
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
SizedBox(height: 2.0),
Text(
distance,
style: TextStyle(color: kWhite),
),
],
),
),
Positioned(
bottom: 10,
right: 15,
child: FaIcon(
FontAwesomeIcons.instagram,
color: kWhite,
),
),
],
);
}
double _getHeight() {
double defaultValue = 170.0;
Random random = Random();
return defaultValue + random.nextInt(56);
}
}
Возможно, вы можете использовать два бок о бок ListView