Joseph-Gayed/DepiFlutterSessions24

0. Environment Setup

• Download Flutter sdk.
• Add Flutter bin path to environment path
• Download Android Studio and install it.
• Open Android Studio Plugins and Install plugins: Flutter. and Dart .
• Run the “flutter doctor” command. and follow the output

1. Declarative UI vs Imperative

• Declarative: means that Flutter builds its user interface to reflect the current state of your app.
  When the state of your app changes, that triggers a redraw of the user interface.
• Imperative: means changing of the UI itself (like widget.setText)
  Understanding UI Paradigms
  Simple Example to show difference

2. Everything is Widget

• Create a new flutter project and In the main.dart , delete everything and start from scratch.
• Create new Stateless widget (MyApp)
• Widget catalog: Cupertino Material
• Explain Material App
• Explain Scaffold
  • Explain AppBar (title , color , elevation , leading , actions)
• Explain Center
• Explain Container
  • Explain Padding property ,
    • EdgeInset (all , symmetric, only)
  • Explain decoration property BoxDecoration
    • Take care conflict between color and decoration properties
    • borderRadius
• Explain Padding Widget
• Explain Text
  • textStyle
• Explain SelectableText , SelectionArea
• Explain Icon
  • Built-in icons
• Explain Image
  • Asset Folder
  • Image.asset
  • Image.network
• Explain CircleAvatar
  • AssetImage
  • NetworkImage
  • LoadingBuilder
• Explain Column , Row
  • Create a column of 3 containers with different widths.
  • MainAxisAlignment: (start,center,end,spaceBetween,spaceAround,spaceEvenly)
  • CrossAxisAlignment : (start,center,end,stretch,baseline)
• Explain Expanded
  • Use it inside a column or row
  • Fill up the remaining space (Horizontally Or Vertically)
  • If all children of column or row are Expanded , the size is divided evenly
  • Explain Flex property (Ratio of current widget in comparison with others)
• Explain ListView
  • Increase the height of any container of the 3. And explain the overflow error.
  • Replace column with ListView , (i.e. listview with children array)
  • Mention the scrollDirection property (Axis.horizontal, Axis.vertical)
  • Show the ListView.Builder , and for item builder use:
    • ListTile
• Explain GridView
  • Mention gridDelegate : SliverGridDelegateWithFixedCrossAxisCount to specify number of columns in each row
  • In container use the margin property
• Explain Stack
  • Create 3 containers with different widths and colors.
  • Change the alignment: to Alignment.center
• Explain GestureDetector
  • Create a container that contains a Text , then Wrap the container inside GestureDetector.
  • use onTap property and show names of the other options of gestures.
• Explain Clicking Actions
  • Common Buttons Types
    • ElevatedButton,
    • FilledButton,
    • OutlinedButton,
    • TextButton
  • Floating Action Button , Extended Floating Action Button
  • Icon Button
  • SegmentedButton
• Explain Theme
  • ThemeData , ThemeData.dark (theme, darkTheme properties in MaterialApp)
    • colorScheme,
    • appBarTheme,
    • bottomNavigationBarTheme,
    • textTheme . Font sizes
    • scaffoldBackgroundColor
    • fontFamily: name of the font from an assets font file
• Task1:
  • Profile Screen Figma
  • Activities Screen Figma

3. Navigation

• Navigator and routes
• Clear the main.dart from all code, then inside the lib folder create folder “pages’
• Create 3 dart files ‘page1.dart, page2.dart, page3.dart’ each one is stateless widgets.
• In the main , inside the material app specify the home: to be Page1
• In Page1:
  • Add an app bar,and a centered button “Go to Page2”
  • On click on button , use Navigator.push
• Switch to Routes and Push Named
  • Create 3 pages Home,Settings,Notifications
  • In the main inside the material app , add **routes **: {‘/page2’:(context)=>Page2()}
  • In Page 1 replace Navigator.push with Navigator.pushNamed
• Bottom Navigation
  • BottomNavigationBar , BottomNavigationBarItem
  • Create int _currentPageand a List<Widget>_pages,
  • Inside the scaffold , make body: _pages[_currentPage]
  • Inside Scaffold use the **bottomNavigationBar **property
  • In the BottomNavigationBar pass currentIndex: _currentPage and in to **onTap: **use **setSate **to change the value of _currentPage
• Task2: Food Navigation Figma

4. Stateless VS Stateful

• Create a new project (default counter) , clear it and rewrite it.
• Start with creating new Stateful Widget CounterScreen
• Mention that any stateful need
  • Variable to hold the state: like: counter
  • Method to update the state : like setState()
  • UI to respond to state changes
• **Stateful **widget means that a widget can **change **based on the state.
• Stateless means that that widget does not change ever
• Life Cycle of stateful widget: article
• Task3: Calculator Screen Figma

5. User Input

• Text Inputs

  • TextInputField
    • TextEditingController
    • InputDecoration
      • border: OutlineInputBorder , hintText , label
  • Form
    • inside a form you can use one of the following widgets, to use a validator.,
    • Validator is a lambda that returns a nullable string.If the validator returns string , an error text will be displayed ,but if returned null, it means validation is passed without errors.
    • FormField
    • TextFormField

• Create a new project, clear the default code. The app Asks user to enter some info, and click OK, then navigate to another screen to show the inputs added from the previous screen.

• Task4: Todo App Figma

  • Login,
  • Show list of Items,
  • Each Item contains checkbox, swipe to delete Slide to delete package
  • There is a floating action button to add a new task , it opens a dialog to enter task details.

6. Reference 9 hours video Youtube