tip_flutter_image_view 0.1.5

A new flutter plugin project,than can let you use native image in flutter app

example/lib/main.dart

import 'package:flutter/material.dart';

import 'package:tip_flutter_image_view/tip_flutter_image_view.dart';
import 'package:tip_flutter_image_view_example/image_list.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  double width = 300;
  double height = 300;
  bool useFlutterImage = false;
  String imageUrl =
      "https://pic-30134.picsz.qpic.cn/d321beac940b4bec9735c49dc4a1";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('flutter使用原生ImageView'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.list),
            onPressed: () {
              Navigator.pushReplacement(
                context,
                new MaterialPageRoute(
                    maintainState: false,
                    builder: (context) => new ImageListDemo()),
              );
            },
          )
        ],
      ),
      body: Stack(
        children: <Widget>[
          Column(
            children: <Widget>[
              Expanded(
                flex: 1,
                child: Container(),
              ),
              Text('flutter这边的图片container参数设置'),
              Row(
                children: <Widget>[
                  Text('flutter上的宽度'),
                  Slider(
                      value: width,
                      min: 100,
                      max: 400,
                      onChanged: (value) {
                        setState(() {
                          width = value.roundToDouble();
                        });
                      }),
                ],
              ),
              Row(
                children: <Widget>[
                  Text('flutter上的高度'),
                  Slider(
                      value: height,
                      min: 100,
                      max: 400,
                      onChanged: (value) {
                        setState(() {
                          height = value.roundToDouble();
                        });
                      }),
                ],
              ),
              Row(
                children: <Widget>[
                  Text('是否使用原生层加载图片'),
                  Checkbox(
                    value: useFlutterImage,
                    onChanged: (value) {
                      setState(() {
                        useFlutterImage = value;
                      });
                    },
                  )
                ],
              ),
            ],
          ),
          Center(
            child: Container(
              width: width,
              height: height,
              child: useFlutterImage
                  ? TipFlutterImageView(
                      url: imageUrl,
                      width: width,
                      height: height,
                      aspectRatio: MediaQuery.of(context).devicePixelRatio,
                      centerCrop: true,
                    )
                  : Image.network(
                      imageUrl,
                      fit: BoxFit.cover,
                      width: width,
                      height: height,
                    ),
            ),
          )
        ],
      ),
    );
  }
}