Flutter九宫格图片处理插件ninepatch_image的使用

Flutter九宫格图片处理插件ninepatch_image的使用

什么是九宫格图片？

九宫格图片（也称为9-patch图片）是一种特殊的PNG格式图片，适用于开发者需要在背景图片中包裹任何内容而不使背景图片像素化的情况。通常背景图片有固定的尺寸，但有时我们需要不使背景图片像素化的拉伸效果，这使得常规PNG图片变得困难。

示例图片

• 示例1：
• 示例2：

结果

如何使用ninepatch_image插件

1. 在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  ninepatch_image: ^0.0.4

1. 在你的代码中使用NinePatchImage组件来加载和显示九宫格图片：

import 'package:flutter/material.dart';
import 'package:ninepatch_image/ninepatch_image.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  [@override](/user/override)
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          children: const [
            SizedBox(
              height: 50,
            ),
            NinePatchImage(
                hideLines: true,
                imageProvider: AssetImage("assets/orange.9.png"),
                child: Text(
                    "Lorem Ipsum is simply dummy text of the printing and typessetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It wast popularised in the 1960s with the release of Letraset sheets")),
            NinePatchImage(
                hideLines: true,
                imageProvider: AssetImage("assets/bubble_blue.9.png"),
                child: Text(
                    "Hi welcome Lorem Ipsum is simply dummy text of the printing and typessetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It survived not only five centuries, but also the leap into electronic typesetting,")),
            NinePatchImage(
                hideLines: true,
                imageProvider: AssetImage("assets/red.9.png"),
                child: Text(
                    "Hi welcome sdfdsf "))
          ],
        ),
      ),
    );
  }
}