Skip to content

Instantly share code, notes, and snippets.

@yshogo
Created April 17, 2019 10:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yshogo/cac0e21343858c6a15bddde36e72fdb1 to your computer and use it in GitHub Desktop.
Save yshogo/cac0e21343858c6a15bddde36e72fdb1 to your computer and use it in GitHub Desktop.
Create TED app UI using Flutter!
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
_tabController = TabController(length: 2, vsync: this);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
leading: Container(
margin: EdgeInsets.only(left: 10),
child: Image.asset("assets/TED_three_letter_logo.svg.png"),
),
actions: <Widget>[
Container(
margin: EdgeInsets.only(right: 10),
child: Icon(
Icons.cast,
color: Colors.red,
),
)
],
bottom: TabBar(
labelColor: Colors.red,
tabs: [
Tab(
child: const Text(
"NEWST",
),
),
Tab(
child: const Text(
"POPULAR",
),
)
],
controller: _tabController,
),
),
body: TabBarView(
controller: _tabController,
children: <Widget>[
_newest(),
Icon(Icons.print),
],
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
fixedColor: Colors.red,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.subscriptions),
title: Text("Talks"),
),
BottomNavigationBarItem(
icon: Icon(Icons.add_box),
title: Text("Discover"),
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text("My TED"),
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text("Search"),
),
],
),
);
}
Widget _newest() {
List<Widget> widgetList = [];
widgetList.add(Container(
height: 300,
child: Stack(
children: <Widget>[
Image.asset(
"assets/top.jpg",
fit: BoxFit.fill,
),
Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.play_circle_filled,
size: 100,
),
SizedBox(
height: 30,
),
Container(
margin: EdgeInsets.only(left: 20, right: 20),
child: Text(
"This Channel is Flutter Live Coding. Please Subscribe!!!",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
)
],
),
),
],
),
));
List<Widget> list = List.generate(5, (int i) {
return Container(
margin: EdgeInsets.all(20),
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Image.asset("assets/$i.jpg"),
),
SizedBox(
width: 10,
),
Expanded(
flex: 3,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Please Subscribe!!!!!"),
SizedBox(
height: 3,
),
Text(
"FLutter is creating the beatiful app ui. I Love it",
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
);
});
widgetList.addAll(list);
return ListView(
children: widgetList,
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment