Lernen Assets, Fonts, App Themes

Definition

In Flutter, assets are external files such as images, fonts, or other resources that your app uses at runtime. These files are bundled with your app and accessed through asset paths.

To display images in your Flutter app, you first need to add them as assets in your project. Place your image files (like PNG or JPG) in a folder, often named assets/images, inside your project directory. Then, declare these images in your pubspec.yaml file under the assets section. This step makes Flutter aware of the files so you can use them in your app's widgets.

main.dart


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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Asset Image Example'),
        ),
        body: Center(
          child: Image.asset('assets/images/flutter_logo.png'),
        ),
      ),
    );
  }
}

To use custom fonts, download the font files (such as .ttf or .otf) and place them in a folder like assets/fonts within your project. Next, update your pubspec.yaml file to declare the fonts under the fonts section. After declaring the font, you can set it in your widgets using the style property of Text widgets.

main.dart


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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        fontFamily: 'Lobster',
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Font Example'),
        ),
        body: Center(
          child: Text(
            'Hello with Lobster Font!',
            style: TextStyle(fontSize: 32),
          ),
        ),
      ),
    );
  }
}

Themes in Flutter let you define colors, fonts, and visual styles for your entire app using the ThemeData class. By setting properties like primarySwatch, accentColor, and fontFamily in ThemeData, you can ensure a consistent look and feel across all screens and widgets.

Note

Keep your assets organized in clearly named folders (like assets/images or assets/fonts). This makes your project easier to maintain and helps prevent mistakes when referencing asset paths in your code.

War alles klar?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 3

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you show me an example of how to declare images in pubspec.yaml?

How do I use a custom font in a Text widget?

What are some tips for organizing asset folders in a Flutter project?

Swipe um das Menü anzuzeigen

Definition

In Flutter, assets are external files such as images, fonts, or other resources that your app uses at runtime. These files are bundled with your app and accessed through asset paths.

main.dart


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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Asset Image Example'),
        ),
        body: Center(
          child: Image.asset('assets/images/flutter_logo.png'),
        ),
      ),
    );
  }
}

main.dart


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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        fontFamily: 'Lobster',
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Font Example'),
        ),
        body: Center(
          child: Text(
            'Hello with Lobster Font!',
            style: TextStyle(fontSize: 32),
          ),
        ),
      ),
    );
  }
}

Note

War alles klar?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 3