flutter Ui - splimter/Flutter GitHub Wiki

Flutter UI

Theme

return MaterialApp(
  theme: ThemeData.dark(),
  home: InputPage(),
);

// for more controlle
theme: ThemeData(
  primaryColor: Color(0xFF0A0E21),
  scaffoldBackgroundColor: Color(0xFF0A0E21),
  accentColor: Colors.red,
  textTheme: TextTheme(
    bodyText1: TextStyle(color: Colors.white),
    bodyText2: TextStyle(color: Colors.white),
  )
)

AppBar

appBar: AppBar(
  leading: CircleAvatar(child: Text("AB"),),
  elevation: 10,
  actionsIconTheme: IconThemeData(color: Colors.deepPurple),
  title: Text("Title"),
  centerTitle: true,
  actions: <Widget>[
  IconButton(
    icon: Icon(Icons.add),
    onPressed: () {},
    ),
  IconButton(
    icon: Icon(Icons.remove),
    onPressed: () {},
    ),
  ],
),

SliverAppBar

Scaffold(
  body: NestedScrollView(
    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
      return <Widget>[
        SliverAppBar(
          expandedHeight: 200.0,
          floating: false,
          pinned: true,
          flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text("Collapsing Toolbar",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16.0,
                  )),
              background: Image.network(
                "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                fit: BoxFit.cover,
              )),
        ),
      ];
    },
    body: Center(
      child: Text("Sample Text"),
    ),
  ),
)

bottomNavigationBar

class _MyHomePage extends State<MyHomePage> {
  int _selectedIndex = 0;

  void _onItemTap(int value) {
    setState(() {
      _selectedIndex = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.mail),
            title: Text('Inbox'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.people),
            title: Text('Contacts'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.calendar_today),
            title: Text('Calendar'),
          ),
        ],
        fixedColor: Colors.deepPurple,
        onTap: _onItemTap,
        currentIndex: _selectedIndex,
      ),
      body: [
        Inbox(),
        Contacts(),
        Calendar(),
      ].elementAt(_selectedIndex),
    );
  }
}

Inbox, Contacts and Calendar are all same.

class Inbox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text("This Is Inbox"),
      ),
    );
  }
}

BottomSheet

// if its a Widget then
onPressed: () {
  showModalBottomSheet(context: context, builder: buildBottomSheet);
},
// if its a state[less/full] widget then
builder:(context)=> AddTaskScreen()

Custom Loading Widget

Flutter Spinkit, A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit.

Widget and params

// set data to pass
MICardLine('0541233212'),
MICardLine('Mobile Developer'),
// set ctor
final String text;
const MICardLine(this.text, {Key key, }) : super(key: key);

// set data from param
Text(text)

ListTile

// scratch
Row(
  children: <Widget>[
    Icon(
      icon,
      color: Colors.blueGrey[900],
    ),
    SizedBox(
      width: 25,
    ),
    Text(text,
        style: TextStyle(
            fontSize: 10,
            fontWeight: FontWeight.bold,
            color: Colors.blueGrey[900])),
  ],
)

// pre-build
ListTile(
  leading: Icon(icon),
  title: Text(text,
      style: TextStyle(
          fontSize: 10,
          fontWeight: FontWeight.bold,
          color: Colors.blueGrey[900])),
)

Round Corner

Container(
  decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(20.0),
        topRight: Radius.circular(20.0),
      )),
)

Example 1

Container(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      CircleAvatar(
        radius: 50,
        backgroundColor: Colors.red,
      ),
      Text('Merah Soheyb',
          style:
              TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),
      SizedBox(width: 150,child: Divider(color: Colors.white,),),
      MICardLine('0541233212', Icons.phone),
      MICardLine('Mobile Developer', Icons.code),
    ],
  ),
)

class MICardLine extends StatelessWidget {
  final String text;
  final IconData icon;

  const MICardLine(
    this.text,
    this.icon, {
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.blueGrey[400],
      margin: EdgeInsets.symmetric(vertical: 10, horizontal: 25),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListTile(
          leading: Icon(icon),
          title: Text(text,
              style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: Colors.blueGrey[900])),
        ),
      ),
    );
  }
}
⚠️ **GitHub.com Fallback** ⚠️