Flutter PrecachedImage 사용하기

Flutter PrecachedImage 사용하기

Flutter에서 이미지를 미리 캐시하여 로딩 시간을 줄이는 방법은 두 가지가 있습니다.

1. Image.asset 사용하기

• Image.asset은 앱 번들에 포함된 이미지를 표시하는 데 사용됩니다.
• 이미지를 미리 캐시하려면 precacheImage 함수를 사용합니다.

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
  void initState() {
    super.initState();
    precacheImage(AssetImage('assets/image.png')); // 이미지 미리 캐시
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Image.asset('assets/image.png'),
      ),
    );
  }
}

2. PrecachedImage 위젯 사용하기

• PrecachedImage 위젯은 이미지를 미리 캐시하고 표시하는 데 사용됩니다.
• 여러 이미지를 미리 캐시해야 하는 경우 PrecacheImages 위젯을 사용할 수 있습니다.

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
  void initState() {
    super.initState();
    precacheImage(AssetImage('assets/image1.png')); // 이미지 미리 캐시
    precacheImage(AssetImage('assets/image2.png')); // 이미지 미리 캐시
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            PrecachedImage(
              image: AssetImage('assets/image1.png'),
            ),
            PrecachedImage(
              image: AssetImage('assets/image2.png'),
            ),
          ],
        ),
      ),
    );
  }
}

참고자료

• Flutter Docs: PrecachedImage: