Flutter

create_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_app_hello_20_apr_2019/movie.dart';

class CreatePage extends StatefulWidget with  AnimationEagerListenerMixin {

  CreatePage();

  @override
  State<StatefulWidget> createState() {
    return CreatePageState();
  }
}

class CreatePageState extends State<CreatePage> {
  List<Movie> listMovieDisplay = List();
  List<Movie> listMovie = List();
  final Color background = Color(0xfffafafb);
  TextEditingController controller = TextEditingController();

  @override
  void initState() {
    listMovie = generateMovieList();
    listMovieDisplay = List.of(listMovie);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
        appBar: AppBar(
          backgroundColor: background,
          elevation: 0,
          leading: IconButton(icon: Icon(Icons.arrow_back, color: Colors.black54),
              onPressed: () => Navigator.pop(context)),
          title: Text("Create list".toUpperCase(), style: TextStyle(color: Colors.black54),),
          centerTitle: true,
          actions: <Widget>[
            Container(padding: EdgeInsets.all(16),
                child: Text("2", style: TextStyle(
                    color: Colors.cyan,
                    fontSize: 24)))
          ],
        ),
        body: Column(children: <Widget>[
          buildSearchTextField(),
          Expanded(
              child: ListView.builder(
                  itemCount: listMovieDisplay.length,
                  itemBuilder: (context, i) {
                    return buildRowMovie(listMovieDisplay[i]);
                  }))
        ]));
  }

  buildSearchTextField() {
    return Container(
        decoration: BoxDecoration(color: Colors.white,
            borderRadius: BorderRadius.circular(2),
            border: Border.all(
                color: Colors.black54.withOpacity(0.2),
                width: 1)),
        padding: EdgeInsets.all(8),
        margin: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
        child: Row(children: <Widget>[
          Icon(Icons.search, size: 24, color: Colors.black54.withOpacity(0.2)),
          Expanded(child:
          TextField(
              controller: controller,
              onChanged: (text) {
                searchMovie(text);
              },
              decoration: InputDecoration.collapsed(hintText: "Find you fav anything",
                  hintStyle: TextStyle(
                      color: Colors.black54.withOpacity(0.2))))),
          Icon(Icons.filter_list, size: 24, color: Colors.black54.withOpacity(0.2)),
        ]));
  }

  List<Movie> generateMovieList() {
    List<Movie> list = List();
    list.add(Movie(title: "Silicon Valley",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip"));
    list.add(Movie(title: "Luke Cage",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing"
            " elit, sed do eiusmod tempor incididunt ut labore et dolore"
            " magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation"
            " ullamco laboris nisi ut aliquip",
        isHot: true));
    list.add(Movie(title: "Iron Man",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip"));
    list.add(Movie(title: "Dr.Strange ",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip"));
    list.add(Movie(title: "Kangku Panda",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip"));
    list.add(Movie(title: "Last Emperor",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip"));
    return list;
  }

  Widget buildRowMovie(Movie movie) {
    return Container(
      decoration: BoxDecoration(color: Colors.white,
          borderRadius: BorderRadius.circular(6)),
      padding: EdgeInsets.all(8),
      margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Row(crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Image.asset("assets/images/my_book.jpg",
                width:
                80,
                height: 80,
                fit: BoxFit.
                cover),
            Expanded(child: Container(
                margin: EdgeInsets.only(left: 16),
                child: Column(crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Row(children: <Widget>[
                        Text(movie.title,
                            style: TextStyle(fontSize: 32, fontWeight
                                : FontWeight.bold,
                                color: Colors.black54
                            )),
                        Visibility(visible: movie.isHot,
                            child: Container(padding: EdgeInsets.all(6),
                                margin: EdgeInsets.only(left: 8),
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(6),
                                    color: Colors.red[300]),
                                child: Text("Hot!",
                                  style: TextStyle(color: Colors.white),)))
                      ],),
                      Text(movie.description,
                          overflow: TextOverflow.clip,
                          softWrap: true,
                          style
                              : TextStyle(color: Colors.black54.withOpacity
                            (
                              0.3
                          )
                          )
                      ),
                    ]
                ))
            )
          ]
      )
      ,
    );
  }

  void searchMovie(String text) {
    print(text);
    setState(() {
      listMovieDisplay = listMovie.where((m) => m.title.contains(text)).toList();
    });
  }
}

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_app_hello_20_apr_2019/create_page.dart';
import 'package:flutter_app_hello_20_apr_2019/story.dart';

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> {

  Color background = Color(0xfffafafb);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: background,
          elevation: 0,
          leading: IconButton(icon: Icon(Icons.menu), color: Colors.black54,
              onPressed: () {}),
          title: Text("What's happen", style: TextStyle(color: Colors.black54),),
          centerTitle: true,
          actions: <Widget>[IconButton(icon: Icon(Icons.add), color: Colors.black54,
            onPressed: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => CreatePage()));
            },)
          ],
        ),
        body: ListView(children: <Widget>[
          buildRowStory(story: Story(name: "Nolan Timble", time: 10, color: Colors.purple[300])),
          buildRowStory(story: Story(name: "Billy Ok", time: 15, color: Colors.green[300])),
          buildRowStory(story: Story(name: "Broly Horon", time: 16, color: Colors.orange[300])),
          buildRowStory(story: Story(name: "Jacky Cheng", time: 22, color: Colors.blue[300])),
        ]));
  }

  Widget buildRowStory({Story story}) {
    return Column(children: <Widget>[
      Container(constraints: BoxConstraints.expand(height: 120),
          child: ListView(padding: EdgeInsets.symmetric(horizontal: 16),
              scrollDirection: Axis.horizontal,
              children: buildRowImage)),
      Padding(padding: EdgeInsets.all(16),
          child: Row(
              children: <Widget>[
                CircleAvatar(child: Icon(
                    Icons.person,
                    color: Colors.white),
                    backgroundColor: Colors.purple[200]),
                Container(margin: EdgeInsets.only(left: 8),
                    child: Column(crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(story.name, textAlign: TextAlign.left,
                              style: TextStyle(
                                  color: Colors.black54,
                                  fontWeight: FontWeight.bold
                              )),
                          Text("${story.time} Minutes ago", style: TextStyle(
                            color: Colors.black54.withOpacity(0.5),
                          )),
                        ])),
                Expanded(child: Container()),
                FlatButton(child: Text("see more", style: TextStyle(color: Colors.white),),
                    color: story.color,
                    onPressed: () {})
              ])
      )
    ]);
  }

  List<Widget> get buildRowImage {
    List<Widget> list = List();
    for (int i = 0; i < 6; i++) {
      list.add(Container(
          margin: EdgeInsets.all(4),
          child: ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.asset("assets/images/my_book.jpg",
                  width: 150,
                  height: 150,
                  fit: BoxFit.cover))));
    }
    return list;
  }
}

movie.dart

class Movie {
  String title;
  String description;
  bool isHot;

  Movie({this.title, this.description, this.isHot = false});
}

story.dart

import 'package:flutter/material.dart';

class Story{
  String name;
  int time;
  Color color;

  Story({this.name, this.time,this.color});


}