# Flutter 네이티브 광고

## 1. 네이티브 광고 레이아웃 만들기 <a href="#native-layout" id="native-layout"></a>

네이티브 광고 에서는 다음과 같은 view 의 종류들이 포함 될 수 있습니다.

* headline : 제목
* body : 내용
* profile&#x20;
  * displayLogo : 광고주 로고
  * displayName : 광고주 이름
* asset : 소재 이미지
* destinationURL : 링크
* extra
  * id : 커스텀 필드 아이디
  * text : 커스텀 필드의 광고주가 입력한 컨텐츠

예를 들어, 소셜 피드 형식의 네이티브 광고를 구성한다면 다음과 같은 레이아웃을 만들 수 있습니다.

<figure><img src="https://114331753-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F80r9IosbRVD44m7nPdej%2Fuploads%2FuHNJwIXbjFNeoBR5SwEI%2Fimage.png?alt=media&#x26;token=4a8949e4-af68-4af2-992e-0394f9c7025b" alt=""><figcaption></figcaption></figure>

### 1-1. 커스텀 필드 데이터 추가 및 자유로운 이미지 소재 사용하기 <a href="#custom" id="custom"></a>

예를 들어, t1, t2, t3 라는 커스텀 필드가 추가 되었을 경우에 대해 알아보겠습니다.\
\* 텍스트 라벨은 광고주 콘솔에 입력되는 라벨입니다.

```dart
Widget nativeAdView(BuildContext context) {
    if (!isLoaded) return Container();

    return Container(
      margin: const EdgeInsets.symmetric(vertical: 16),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black),
      ),
      width: MediaQuery.of(context).size.width,
      child: AdropNativeAdView(
        ad: nativeAd,
        child: Container(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Image.network(
                    nativeAd?.properties.profile?.displayLogo ?? '',
                    width: 24,
                    height: 24,
                  ),
                  const SizedBox(
                    width: 4,
                  ),
                  Text(
                    nativeAd?.properties.profile?.displayName ?? '',
                  )
                ],
              ),
              const SizedBox(
                height: 8,
              ),
              if (nativeAd?.properties.headline != null)
                Text(
                  nativeAd?.properties.headline ?? '',
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              if (nativeAd?.properties.body != null)
                Text(
                  nativeAd?.properties.body ?? '',
                  style: const TextStyle(
                    fontSize: 14,
                  ),
                ),
              if (nativeAd?.properties.asset != null)
                Column(children: [
                  const SizedBox(
                    height: 4,
                  ),
                  Image.network(
                    nativeAd?.properties.asset ?? '',
                    loadingBuilder: (context, child, loadingProgress) {
                      if (loadingProgress == null) return child;
                      return const CupertinoActivityIndicator();
                    },
                    errorBuilder: (context, error, stackTrace) {
                      return const Icon(Icons.error);
                    },
                    width: MediaQuery.of(context).size.width,
                    height: 300,
                  )
                ]),
              if (nativeAd?.properties.extra['t1'] != null)
                Column(
                  children: [
                    const SizedBox(
                      height: 8,
                    ),
                    Text(
                      nativeAd?.properties.extra['t2'] ?? '',
                      style: const TextStyle(
                        fontSize: 14,
                      ),
                    ),
                    Text(
                      nativeAd?.properties.extra['t3'] ?? '',
                      style: const TextStyle(
                        fontSize: 14,
                      ),
                    ),
                  ],
                )
            ],
          ),
        ),
      ),
    );
  }

```

{% hint style="info" %}
자세한 예시는 [Github](https://github.com/OpenRhapsody/adrop_ads_flutter/blob/master/example/lib/views/native_example.dart)에서 확인하실 수 있습니다.\
타입 또한 [Github](https://github.com/OpenRhapsody/adrop_ads_flutter/blob/master/lib/src/native/adrop_native_ad.dart)에서 확인하실 수 있습니다.
{% endhint %}

## 2. 네이티브 광고 불러오기 <a href="#load-native" id="load-native"></a>

| Ad type        | Ad unit ID                     |
| -------------- | ------------------------------ |
| Test Native ID | PUBLIC\_TEST\_UNIT\_ID\_NATIVE |

Step 1. Contsturctor Event Listener

```dart
final AdropNativeListener listener = AdropNativeListener(
    onAdReceived: (ad) =>
        debugPrint('Adrop Native Ad loaded with unitId ${ad.unitId}!'),
    onAdFailedToReceive: (ad, errorCode) => 
        debugPrint('error in ${ad.unitId} while loading: $errorCode'),
    ...
);

```



Step 2. Display a Native AD

```dart

class YourComponent extends StatefulWidget {
  const YourComponent({super.key});

  @override
  State<StatefulWidget> createState() => _YourComponentState();
}

class _YourComponentState extends State<YourComponent> {
  final AdropNativeAd nativeAd = AdropNativeAd(
    unitId: 'YOUR_UNIT_ID',
    listener: listener,
  );
  
  bool isLoaded = false;

  @override
  void initState() {
    super.initState();
    nativeAd.load();
  }
  
  Widget nativeAdView(BuildContext context) {
    if (!isLoaded) return Container();
    
    return AdropNativeView(
      ad: nativeAd,
      child: Column(
        children: [
          if (nativeAd.properties.profile?.displayLogo)
              Image.network(
                nativeAd.properties.profile?.displayLogo,
                width: 24,
                height: 24,
              ),
          if (nativeAd.properties.profile?.displayName) 
              Text(
                nativeAd.properties.profile?.displayName,
              ),
          if (nativeAd.properties.headline != null)
            Text(nativeAd.properties.headline),
          if (nativeAd.properties.body != null)
            Text(nativeAd.properties.body),
          if (nativeAd.properties.asset != null)
            Image.network(nativeAd.properties.asset, width: {{yourWidth}}, height: {{yourHeight}}),
          if (nativeAd.properties.extra['sampleExtraId'] != null)
            Text(nativeAd.properties.extra['sampleExtraId']),
        ],
      )
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: nativeAdView(context),
      ),
    );
  }
}
    
```



[샘플코드 자세히 보기](https://github.com/OpenRhapsody/adrop_ads_flutter/blob/master/example/lib/views/native_example.dart)&#x20;

