Flutter Design 913 : PageController

main.dart

import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class Sys extends StatelessWidget {

  @override
  Widget build(BuildContext context) => MaterialApp(
    home: MainPage(),
  );
}

class MainPage extends StatelessWidget {

  const MainPage();
  final double _horizontal = 80.0;
  final double _vertical = 80.0;

  @override
  Widget build(BuildContext context) => Scaffold(
    backgroundColor: Colors.white,
    appBar: AppBar(
      elevation: 0,
      backgroundColor: Colors.white,
      iconTheme: IconThemeData(
          color: Colors.black
      ),
      actions: [
        IconButton(
          icon: Icon(Icons.shopping_cart),
          onPressed: (){},
        ),
        IconButton(
          icon: Icon(Icons.notifications),
          onPressed: (){},
        ),
      ],
    ),
    body: SafeArea(
      child: SingleChildScrollView(
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height-MediaQuery.of(context).padding.top-160-kBottomNavigationBarHeight-kToolbarHeight,
          margin: EdgeInsets.symmetric(
            vertical: this._vertical/2,
            horizontal: this._horizontal/2
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Title(),
              Container(
                child: Column(
                  children: [
                    SearchBar(),
                    Container(
                      width: MediaQuery.of(context).size.width-this._horizontal,
                      height: 40.0,
                      margin: EdgeInsets.symmetric(vertical: 10.0),
                      child: HotKeyword()
                    ),
                  ],
                ),
              ),
              MainMenus()
            ],
          ),
        ),
      ),
    ),
    bottomNavigationBar: BottomNavigationBar(
      selectedItemColor: Colors.red,
      unselectedItemColor: Colors.grey,
      showUnselectedLabels: false,
      showSelectedLabels: false,
      items: <int>[1,2,3,4,5].map<BottomNavigationBarItem>(
        (int i) => BottomNavigationBarItem(
          label: "",
          icon: Icon(Icons.home_filled)
        ),
      ).toList(),
      type: BottomNavigationBarType.fixed,
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return Text(
      "Logo",
      style: TextStyle(
        fontSize: 40.0,
        fontWeight: FontWeight.bold
      ),
    );
  }
}

class SearchBar extends StatefulWidget {
  const SearchBar({Key? key}) : super(key: key);

  @override
  _SearchBarState createState() => _SearchBarState();
}

class _SearchBarState extends State<SearchBar> {

  TextEditingController? _textEditingController;

  @override
  void initState() {
    this._textEditingController = TextEditingController();
    super.initState();
  }

  @override
  void dispose() {
    this._textEditingController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Container(
    margin: EdgeInsets.symmetric(vertical: 5.0),
    child: Platform.isIOS
      ? CupertinoTextField(
          scrollPhysics: NeverScrollableScrollPhysics(),
          controller: this._textEditingController,
          prefix: Container(
            child: Icon(
              CupertinoIcons.search,
              color: CupertinoColors.destructiveRed,
            ),
            padding: EdgeInsets.only(left: 10.0)
          ),
          placeholder: "Search...",
          clearButtonMode: OverlayVisibilityMode.editing,
          maxLength: 20,
          minLines: 1,
          maxLines: 1,
          padding: EdgeInsets.all(20.0),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20.0),
            border: Border.all(color: Colors.grey)
          ),
        )
      : TextField(
          controller: this._textEditingController,
          maxLines: 1,
          maxLength: 20,
          minLines: 1,
          cursorColor: Colors.black,
          decoration: InputDecoration(
            counterText: "",
            hoverColor: Colors.grey,
            focusColor: Colors.grey,
            fillColor: Colors.grey,
            hintText: "Search...",
            suffixIcon: Icon(Icons.search, color: Colors.red),
            contentPadding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 20.0),
            border: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.grey),
              borderRadius: BorderRadius.circular(20.0)
            ),
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.grey),
              borderRadius: BorderRadius.circular(20.0)
            )
          ),
        ),
  );
}

class HotKeyword extends StatefulWidget {
  const HotKeyword({Key? key}) : super(key: key);

  @override
  _HotKeywordState createState() => _HotKeywordState();
}

class _HotKeywordState extends State<HotKeyword> {

  PageController? _pageController;
  int viewIndex = 0;

  @override
  void initState() {
    this._pageController = PageController(initialPage: this.viewIndex);
    Future(() async => await this._auto());
    super.initState();
  }

  @override
  void dispose() {
    this._pageController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Row(
    children: [
      Container(
        padding: EdgeInsets.symmetric(horizontal: 30.0),
        child: Text(
          "🔥",
          style: TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.bold
          )
        )
      ),
      Expanded(
        child: PageView.builder(
          controller: this._pageController,
          scrollDirection: Axis.vertical,
          physics: NeverScrollableScrollPhysics(),
          itemBuilder: (BuildContext context, int index) => Container(
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.only(right: 20.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "hot $index",
                  style: TextStyle(
                    fontSize: 18.0,
                    fontWeight: FontWeight.bold
                  )
                ),
                Icon(
                  index % 3 == 0 ? Icons.arrow_downward_rounded : Icons.arrow_upward_rounded,
                  color: index % 3 == 0 ? Colors.red : Colors.blue[800],
                  size: 20.0
                )
              ],
            )
          )
        ),
      ),
    ],
  );

  Future<void> _auto() async{
    if(this._pageController == null) return;
    if(!this._pageController!.hasClients) return;
    if(!this.mounted) return;
    return await this._next();
  }

  Future<void> _next() async => Future<void>.delayed(Duration(seconds: 4), () async{
    this.viewIndex++;
    await this._pageController!.animateToPage(this.viewIndex, duration: Duration(seconds: 2), curve: Curves.linear);
    return await Future<void>.delayed(Duration(seconds: 2), () async => await this._next());
  });

}


class MainMenus extends StatelessWidget {

  @override
  Widget build(BuildContext context) => Container(
    child: Column(
      children: List.generate(2, (index) => index).map<Widget>(
        (int i) => Row(
          children: <int>[1,2,3,4].map<Widget>(
            (int i) => Expanded(
              child: Card(
                margin: EdgeInsets.all(10.0),
                color: Colors.grey[50],
                child: InkWell(
                  onTap: (){},
                  child: Container(
                    padding: EdgeInsets.symmetric(vertical: 10.0),
                    alignment: Alignment.center,
                    child: Column(
                      children: [
                        Container(
                          alignment: Alignment.center,
                          child: Text("🎯")
                        ),
                        Container(
                          padding: EdgeInsets.all(10.0),
                          child: Text("menu$i")
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            )
          ).toList(),
        )
      ).toList()
    ),
  );
}