# Flutter 好用package - smooth_page_indicator介紹

## smooth_page_indicator
讓頁面轉換的動畫更為流暢，當你滾動頁面時顯示一個頁面指示器。

flutter pub add smooth_page_indicator

[官網](https://pub.dev/packages/smooth_page_indicator)

### 程式範例

final PageController pageController = PageController();
final List<Widget> pageContent;

Column(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    Expanded(
      child: PageView(
        controller: pageController,
        onPageChanged: (value) {
          //頁面改變
        },
        children: teachingContent,
      ),
    ),
    Padding(
      padding: const EdgeInsets.only(top: 16, bottom: 8),
      child: SmoothPageIndicator(
        controller: pageController,
        count: pageContent.length,
        effect: CustomizableEffect(
          activeDotDecoration: DotDecoration(
            width: 14,
            height: 14,
            color: Colors.amber,
            borderRadius: BorderRadius.circular(24),
          ),
          dotDecoration: DotDecoration(
            width: 8,
            height: 8,
            color: Colors.transparent,
            dotBorder: DotBorder(
              padding: 2,
              width: 1,
              color: Colors.white,
            ),
            borderRadius: BorderRadius.circular(16),
          ),
          spacing: 12.0,
        ),
      ),
    ),
  ],
)

###### tags: `flutter`