flutter 屏幕中间

要让 Flutter 的 Widget 在屏幕中间显示，可以使用 Center Widget。Center Widget 可以将其子 Widget 放在屏幕的中间位置。

例如，在一个 MaterialApp 中，可以将 Scaffold 包裹在一个 Center Widget 中，以便将内容放在屏幕的中间。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(
        child: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Screen Centered'),
          ),
          body: Text('Hello, World!'),
        ),
      ),
    );
  }
}

这将在屏幕的中间显示一个带有标题栏和文本的屏幕。

相关问题

flutter listview 横向展示很多头像，屏幕中间头像最大，其他头像依次变小，举例中心越远，头像越小，给出代码示例

要实现这个效果，可以使用 `ListView.builder` 和 `Transform.scale` 来实现。具体步骤如下：

1. 使用 `ListView.builder` 构建一个可以水平滑动的列表视图。

2. 在 `ListView.builder` 中使用 `Transform.scale` 对子组件进行缩放，根据子组件相对于屏幕中心的距离设置不同的缩放比例，例如中心位置的缩放比例为 1.2，两侧的缩放比例为 0.8。可以通过 `MediaQuery.of(context).size.width / 2` 计算屏幕中心位置。

以下是示例代码：

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: 10,
  itemBuilder: (BuildContext context, int index) {
    double distanceFromCenter = (index - _currentIndex).abs().toDouble();
    double scale = 1 - (distanceFromCenter / 10);
    if (scale < 0.8) {
      scale = 0.8;
    }
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Transform.scale(
        scale: scale,
        child: Container(
          width: 80,
          height: 80,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            image: DecorationImage(
              image: NetworkImage(
                'https://picsum.photos/id/$index/200/200',
              ),
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  },
  onScrollNotification: (notification) {
    if (notification is ScrollUpdateNotification) {
      setState(() {
        _currentIndex =
            ((_currentIndex + notification.scrollDelta / 80) % 10).toInt();
      });
    }
    return true;
  },
)

这样就可以实现屏幕中间头像最大，其他头像依次变小的效果了。其中 `_currentIndex` 是当前屏幕中心位置的索引，它可以在 `onScrollNotification` 中通过滑动偏移量计算得出。

flutter自绘组件，实现图片展示在屏幕正中间，图片宽高自适应，图片可拖动，放大缩小，写出示例代码。

以下是一个Flutter自绘组件的示例代码，可以实现图片展示在屏幕正中间，图片宽高自适应，图片可拖动，放大缩小的功能：

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
import 'dart:math' as math;

class ImageEditor extends StatefulWidget {
  final ImageProvider imageProvider;

  ImageEditor({Key key, this.imageProvider}) : super(key: key);

  @override
  _ImageEditorState createState() => _ImageEditorState();
}

class _ImageEditorState extends State<ImageEditor> {
  double _scale = 1.0;
  double _previousScale = 1.0;
  Offset _offset = Offset.zero;
  Offset _previousOffset = Offset.zero;
  Size _imageSize;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onScaleStart: _handleScaleStart,
      onScaleUpdate: _handleScaleUpdate,
      onScaleEnd: _handleScaleEnd,
      child: CustomPaint(
        painter: _ImagePainter(
          imageProvider: widget.imageProvider,
          scale: _scale,
          offset: _offset,
          imageSize: _imageSize,
        ),
        child: SizedBox.expand(),
      ),
    );
  }

  void _handleScaleStart(ScaleStartDetails details) {
    _previousScale = _scale;
    _previousOffset = _offset;
  }

  void _handleScaleUpdate(ScaleUpdateDetails details) {
    setState(() {
      _scale = _previousScale * details.scale;
      _offset = _previousOffset +
          (details.focalPoint - details.localFocalPoint) / _scale;
    });
  }

  void _handleScaleEnd(ScaleEndDetails details) {
    _previousScale = 1.0;
    _previousOffset = _offset;
  }

  @override
  void initState() {
    super.initState();
    Image image = Image(image: widget.imageProvider);
    image.image.resolve(ImageConfiguration()).addListener(
      ImageStreamListener((info, _) {
        setState(() {
          _imageSize = Size(
            info.image.width.toDouble(),
            info.image.height.toDouble(),
          );
        });
      }),
    );
  }
}

class _ImagePainter extends CustomPainter {
  final ImageProvider imageProvider;
  final double scale;
  final Offset offset;
  final Size imageSize;

  _ImagePainter({
    this.imageProvider,
    this.scale,
    this.offset,
    this.imageSize,
  });

  @override
  void paint(Canvas canvas, Size size) async {
    Paint paint = Paint();
    paint.isAntiAlias = true;
    paint.filterQuality = FilterQuality.high;

    Rect rect = Offset.zero & size;
    canvas.clipRect(rect);

    if (imageSize != null) {
      double width = imageSize.width * scale;
      double height = imageSize.height * scale;
      double x = offset.dx + (size.width - width) / 2;
      double y = offset.dy + (size.height - height) / 2;

      Rect imageRect = Rect.fromLTWH(x, y, width, height);
      ui.Image image = await imageProvider.resolve(
        ImageConfiguration(
          size: Size(imageRect.width, imageRect.height),
        ),
      );
      canvas.drawImage(image, imageRect.topLeft, paint);
    }
  }

  @override
  bool shouldRepaint(_ImagePainter oldDelegate) {
    return oldDelegate.scale != scale ||
        oldDelegate.offset != offset ||
        oldDelegate.imageSize != imageSize;
  }
}